推入状态数组的正确方法

JavaScript

逆天猿理查德

2020-03-12

我似乎在将数据推入状态数组时遇到问题。我正在尝试以这种方式实现它:

this.setState({ myArray: this.state.myArray.push('new value') })

但是我相信这是不正确的方式,并导致可变性问题?

第997篇《推入状态数组的正确方法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
米亚Stafan 2020.03.12

通过以下方式,我们可以检查和更新对象

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));
阿飞古一A 2020.03.12

绝不建议直接更改状态。

在更高版本的React中,建议的方法是在修改状态以防止竞争情况时使用updater函数:

将字符串推到数组的末尾

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

将字符串推送到数组的开头

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

将对象推到数组的末尾

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

将对象推送到数组的开头

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android