Question

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

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

由于某种原因，我无法使用我的清除功能清除阵列。我知道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方法对我来说也很奇怪...您不是将节点推入状态。而是始终将其推入空数组。

在这里我尝试了一些清理代码，即使功能可能不是您想要的，但它证明了清理是您要做的第一件事的概念：）

清除功能下面的代码段中的

可以正常工作，并且未经修改。


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 2

您的清除方法应如下所示：

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

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

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

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

Answer 3

`

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

` 尝试放置计时器功能会起作用。它能起作用。

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

我如何在React（JSX）中清除/重置数组内部状态

5 个答案: