正确推入状态数组的方法

Question

我似乎在将数据推送到状态数组时遇到问题.我试图通过这种方式实现它:

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

但我认为这是不正确的方式并导致可变性问题？

Answer 1

使用es6可以这样做:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

传播语法

Answer 2

数组推送返回长度

this.state.myArray.push('new value') 返回扩展数组的长度,而不是数组本身.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

我猜你期望返回的值是数组.

不变性

这似乎是React的行为:

永远不要直接改变this.state,因为之后调用setState()可能会替换你所做的突变.把this.state看作是不可变的.

https://facebook.github.io/react/docs/component-api.html

我想,你会这样做(不熟悉React):

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

Answer 3

永远不建议直接改变国家.

后来的React版本中推荐的方法是在修改状态时使用更新程序功能以防止竞争条件:

将字符串推送到数组的末尾

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

Answer 4

函数式组件和 React Hooks

const [array,setArray] = useState([]);

最后推送值：

setArray(oldArray => [...oldArray,newValue] );

在乞讨处推送价值：

setArray(oldArray => [newValue,...oldArrays] );

Answer 5

在这里，您不能像这样将对象推送到状态数组。您可以在普通数组中按自己的方式推送。在这里你必须设置状态，

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

Answer 6

你根本不应该操作这个州.至少,不是直接的.如果你想更新阵列,你会想做这样的事情.

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

直接处理状态对象是不可取的.您还可以查看React的不变性助手.

https://facebook.github.io/react/docs/update.html

Answer 7

您可以使用.concat方法使用新数据创建数组的副本:

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

但是要小心.concat传递数组时方法的特殊行为- [1, 2].concat(['foo', 3], 'bar')会导致[1, 2, 'foo', 3, 'bar'].

Answer 8

使用反应钩子，您可以按照以下方式进行

const [countryList, setCountries] = useState([]);


setCountries((countryList) => [
        ...countryList,
        "India",
      ]);