如何在 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 方法应如下所示：

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

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

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

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

Answer 2

`

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

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

Answer 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"));

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

Answer 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 个输入。单击删除将全部删除。

Answer 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>
    );
  }
}