正确修改React.js中的状态数组
正确修改React.js中的状态数组
提问于 2014-10-08 17:20:37
我想在state数组的末尾添加一个元素，这是正确的方法吗？
this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });我担心用push就地修改数组可能会带来麻烦-它安全吗？
另一种方法是制作数组的副本，然后使用setState，这似乎很浪费。
回答 15
Stack Overflow用户
发布于 2017-06-29 20:32:16
使用ES6的最简单方法
this.setState(prevState => ({
array: [...prevState.array, newElement]
}))Stack Overflow用户
发布于 2017-01-03 22:31:43
React可以批量更新，因此正确的方法是为setState提供一个执行更新的函数。
对于React更新插件，以下内容将可靠地工作：
this.setState( state => update(state, {array: {$push: [4]}}) );或者对于concat()：
this.setState( state => ({
array: state.array.concat([4])
}));下面以https://jsbin.com/mofekakuqi/7/edit?js,output为例展示了如果你弄错了会发生什么。
setTimeout()调用正确地添加了三个项目，因为React不会在setTimeout回调中批量更新(参见https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ)。
有but的onClick只会添加"Third"，但修复的那个会像预期的那样添加F、S和T。
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
array: []
}
setTimeout(this.addSome, 500);
}
addSome = () => {
this.setState(
update(this.state, {array: {$push: ["First"]}}));
this.setState(
update(this.state, {array: {$push: ["Second"]}}));
this.setState(
update(this.state, {array: {$push: ["Third"]}}));
};
addSomeFixed = () => {
this.setState( state =>
update(state, {array: {$push: ["F"]}}));
this.setState( state =>
update(state, {array: {$push: ["S"]}}));
this.setState( state =>
update(state, {array: {$push: ["T"]}}));
};
render() {
const list = this.state.array.map((item, i) => {
return <li key={i}>{item}</li>
});
console.log(this.state);
return (
<div className='list'>
<button onClick={this.addSome}>add three</button>
<button onClick={this.addSomeFixed}>add three (fixed)</button>
<ul>
{list}
</ul>
</div>
);
}
};
ReactDOM.render(<List />, document.getElementById('app'));Stack Overflow用户
发布于 2021-08-20 17:20:32
目前有这么多人面临着更新useState钩子状态的问题。我使用这种方法来安全地更新它，并想在这里分享它。
这是我的州
const [state, setState] = useState([])假设我有一个名为obj1的对象，并希望将其附加到我的状态中。我建议这样做。
setState(prevState => [...prevState, obj1])这将安全地将对象插入到结尾处，并保持状态一致性
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26253351
复制相关文章
相似问题