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

Question

我正在尝试使用 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"));

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

Answer 1

clear 函数看起来不错，但当我尝试运行您的代码时，它弹出了多个错误和一个拼写错误。 addItem 方法在我看来也很奇怪……您不是将节点插入 state.arr，而是一直将其插入空数组。

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

在下面的代码片段中，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"));

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