如何在 React (JSX) 中清除/重置状态内的数组

Posted 2023-02-22

【中文标题】如何在 React (JSX) 中清除/重置状态内的数组

【英文标题】：How do I clear/reset an array inside state in React (JSX)

【发布时间】：2019-11-09 21:42:38

【问题描述】：

我正在尝试使用 React 和 JSX 制作一个简单的页面，该页面将生成几个输入字段，可以通过单击按钮将其删除。

我目前正在页面状态中存储一个空数组，该数组由 addItems 函数更新。

由于某种原因，我无法使用 clear 函数清除数组。我知道setState 是异步的，但我的数组永远不会更新也永远不会消失。

"use strict";

function Node(props) 
    return(<div>
        <input type="text" placeholder="input here"></input>
    </div>);


class Page extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            arr: [],
            thresh: 5,
            del: "Delete",
        ;
        this.addItem = this.addItem.bind(this);
        this.clear = this.clear.bind(this);
    

    addItem = (index, array) => 
        if (index == this.state.thresh) 
            this.setState((state, props) => (
                arr: array,
            ));
            return;
        
        index++;
        array.push(<Node key=index />);
        this.addItem(index, array);
    ;

    clear = newArr => 
        this.setState(
            arr: newArr,
        , () =>  console.log(this.state.arr) );
    ;

    render() 
        return(<div id="wrapper onClick=() => this.addItem(0,[])>
        <div id="fields">
        this.state.arr
        </div>
        <button onClick=() => this.clear([])>this.state.del</button>
        </div>
    

ReactDOM.render(<Page />, document.getElementById("root"));

我希望当我点击删除按钮时，数组将被一个空数组覆盖，但这不会发生。我可能做错了什么？

【问题讨论】：

是点击按钮时执行的清除功能吗？

"...但这并没有发生" 你有什么证据表明这没有按应有的方式工作？据我所知，您的 clear() 函数看起来是正确的。另一方面，您的addItem() 函数看起来很奇怪，尤其是因为您在调用setState() 之后 向数组推送。我建议你为你的浏览器安装 React Developer Tools 插件。这将允许您直接检查组件的状态以查看它是否正常工作。这比console.log() 更可靠。

@JosepVidal 是的，函数执行。

@Code-Apprentice 回调函数打印一个数组，其中包含元素。关于 addItem，我忘了包括我刚刚添加的一行。

【参考方案1】：

您的 clear 方法应如下所示：

clear = () => 
        this.setState(
            arr: [],
        );
    ;

您在按钮中的点击处理程序：

<button onClick=this.clear>this.state.del</button>

如果你使用箭头函数你不必在构造函数中绑定它们，你可以删除绑定的

【讨论】：

出于某种原因，这似乎仍然无法解决问题。回调函数中的 console.log() 会打印出数组中的五个元素。

在 render 中添加 cnsole.log，而不是作为 setstate 的回调

【参考方案2】：

`

clear = () => 
        this.setState(
            arr: [],
        , () =>  console.log(this.state.arr) );
        setTimeout(() =>  console.log("o/p", this.state.arr); , 3000);
    ;

` 尝试放置计时器功能将起作用。它的工作原理是Acyncronasly。

【讨论】：

您不需要超时。对this.setState()的回调将在状态修改后调用。

【参考方案3】：

clear 函数看起来不错，尽管当我尝试运行您的代码时，它弹出了多个错误和一个错字。 另外 addItem 方法对我来说看起来很奇怪......您没有将节点推入 state.arr 而是一直将其推入空数组。

在这里我尝试清理一下代码，尽管功能可能不是您想要的，但它证明了清理是您需要做的第一件事的概念:)

在sn-p 下面的clear 函数工作正常并且没有被修改。

function Node(props) 
    return(<div>
        <input type="text" placeholder="input here"></input>
    </div>);


class Page extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            arr: [],
            thresh: 5,
            del: "Delete",
        ;
        this.addItem = this.addItem.bind(this);
        this.clear = this.clear.bind(this);
    

    addItem(index, array) 

        var newArr = JSON.parse(JSON.stringify(this.state.arr))
        newArr.push(<Node />)
            this.setState(
              arr: newArr
            );
    

    clear(newArr) 
        this.setState(
            arr: newArr,
        , () =>  console.log(this.state.arr) );
    

    render() 
        return(<div>
        <div id="wrapper" onClick=() => this.addItem(0,[1])>asdasd</div>
          <div id="fields"> this.state.arr </div>
          <button onClick=() => this.clear([])>this.state.del</button>
        </div>)
    



ReactDOM.render(<Page />, document.getElementById("root"));

尝试在此处的代码之上构建/添加您的逻辑，它会起作用。

【参考方案4】：

我注意到这里有很多问题，但我看到的一件事是您的删除按钮被包装在添加的容器中。所以每次单击删除时，它也会添加到数组中。

不过，另一方面，此代码似乎不起作用。它的编写方式看起来永远不会向状态数组添加任何内容，因此我不确定您如何看到除空数组之外的任何内容。

我相信你正在尝试完成这样的事情：

function Node(props) 
    return (<div>
        <input type="text" placeholder="input here"></input>
    </div>);


export default class ClearTest extends React.Component<any, any> 
    constructor(props: any) 
        super(props);
        this.state = 
            arr: [<Node key=1 />],
            thresh: 5
        ;
    

    addItem = () => 
        const  arr, thresh  = this.state;
        if (arr.length < thresh)
        this.setState( arr: [...(arr), <Node key=arr.length + 1 />] )
    ;

    clear = () => 
        this.setState( arr: [] , () =>  console.log(this.state.arr) );
    ;

    public render() 
        return (
            <div id="wrapper">
                <div id="fields">
                    this.state.arr
                </div>
                <button onClick=this.clear>Delete</button>
                <button onClick=this.addItem>Add</button>
            </div>
        );
    

这会将添加移动到一个按钮，并允许添加最多 5 个输入。单击删除将全部删除。

【讨论】：

谢谢你这是我的问题！我只是需要它在调用 addItems 函数后每次都不会填满

【参考方案5】：

您可以尝试使用自定义重置功能对其进行重置：

import React,  Component  from 'react';

const getDefaultState = () => (
  myArray: [],
);

class MyComponent extends Component 
  constructor(props) 
    super(props);
    this.state =  ...getDefaultState() ;
  

  componentDidMount() 
    this.setState( myArray: [1, 2, 3] )
  

  resetState = () => 
    this.setState( ...getDefaultState() );
  ;

  render() 
    return (
      <div onClick=this.resetState>
        JSON.stringify(this.state.myArray)
      </div>
    );