Question

下面的代码覆盖了我的数组，而不是添加到数组顶部。我不知道为什么会这么做。

state = { someArray: [] };

onButtonClick = () => {
  this.setState((state, props) => ({
    someArray: [...state.someArray, props.element]
  }));
};

Answer 1

这是因为您没有散布someArray的现有状态值。试试这个：

onButtonClick = () => {
  this.setState((state, props) => ({
    someArray: [...state.someArray, props.element]
  }));
}

Answer 2

代码中唯一缺少的是()以返回新状态。

...
this.setState((s, p) => ({ ...etc })
...                     ^          ^

否则它确实对我有用，请参见下文：

class App extends React.Component {
  state = { someArray: [] };

  onButtonClick = () => {
    this.setState((state, props) => ({
      someArray: [...state.someArray, props.element]
    }));
  }
  
  render(){
    return (
      <div>
        <button onClick={this.onButtonClick}>Add</button>
        {this.state.someArray}
      </div>
    )
  }
}

ReactDOM.render(<App element=">"/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

三天后，我终于找到了解决此问题的方法。因此，@ gazdagergo和@vich的答案是完全正确的。只是我有一个父组件作为容器，其中包含需要添加到数组中的所有项目，并且所有项目都在子组件内部呈现。我最初在子组件内部声明了数组，每次我向数组中添加一项导致数组被“覆盖”时，都会生成一个新数组。

为了解决这个问题，我没有在子组件内部声明数组，而是将数组声明移到了父组件中，最终解决了该问题。

反应setState覆盖数组状态

3 个答案: