React setState覆盖数组状态

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的回答是完全正确的。只是我有一个父组件作为容器，其中包含需要添加到数组中的所有项，并且所有项都在子组件中呈现出来。我最初在子组件中声明了数组，然后每当我向数组中添加一个项时，子组件就会生成一个新的数组，从而导致数组被"覆盖"。

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