推入状态数组的正确方法

IT技术 javascript reactjs immutability
2021-02-04 22:38:11

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

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

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

6个回答

使用 es6 可以这样完成:

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

传播语法

我做了同样的事情,有两种情况 myArray 可以有值,而它不会。因此,如果它已经有值,它就可以正常工作。但是在没有数据的情况下......它不会用“新值”更新状态。任何解决方案?
2021-03-16 22:38:11
@Johncy 我不确定您的问题是否与此问题有关,请尝试提出一个单独的问题并描述预期的行为,我会尽力帮助您。
2021-03-20 22:38:11
它应该适用于任何数组,不管它是否有值,无论如何它都会被解构。也许其他地方有问题。你能举一个你的代码的例子吗?
2021-03-25 22:38:11
嗨,请参考我在@Tamas 回答下的评论。这只是控制台中的一个示例。我试过 myArray: [...this.state.myArray, 'new value'] 来更新我的状态数组。但它只连接最后一个值。你能告诉我解决方案吗?
2021-04-06 22:38:11
根据 React 文档:“因为this.props并且this.state可能会异步更新,您不应该依赖它们的值来计算下一个状态。” 在修改数组的情况下,由于数组已经作为属性存在,this.state需要引用它的值来设置新的值,所以应该使用setState()以之前状态为参数的函数的形式示例:this.setState(prevState => ({ myArray: [...this.state.myArray, 'new value'] }));参见:reactjs.org/docs/...
2021-04-07 22:38:11

数组推送返回长度

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

我猜你希望返回的值是数组。

不变性

这似乎是 React 的行为:

永远不要直接改变 this.state,因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。react组件

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

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })
当我这样做时,console.log(this.state.myArray)它总是一个落后。知道为什么吗?
2021-03-18 22:38:11
感谢您的回复。它是异步的,因此不会立即向您显示更改。但是 setState 确实有一个回调,它确实显示了正确的值。再次感谢。
2021-04-02 22:38:11
@ManoharReddyPoreddy 非数组值对于该concat()方法完全有效请参阅:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /...连接到新数组的数组和/或值。
2021-04-04 22:38:11
@Si8 好吧,不幸的是,我并没有过多地使用 React。但是文档说: setState()将更改加入组件状态并告诉 React 该组件及其子组件需要使用更新后的状态重新渲染。 所以我想它只是在设置后的那一刻没有更新。你能不能发布一个代码示例,我们可以在那里看到你正在设置和记录它的哪一点,好吗?
2021-04-07 22:38:11
w3schools.com/jsref/jsref_concat_array.asp concat 连接两个数组(不是数组和字符串), .concat('new value'); 应该是 .concat(['new value']);
2021-04-10 22:38:11

从不建议直接改变状态。

在更高版本的 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]
}))
如何在状态数组中添加另一个数组对象?
2021-03-16 22:38:11
肯定会对此进行 +1,因为其他答案不遵循使用回调的最新指导方针,如果状态与自身发生变异。
2021-03-28 22:38:11
我用了这个答案。它也适用于添加到数组中:this.setState((prevState) => ({ myArray: [values, ...prevState.myArray], }));
2021-04-05 22:38:11
这将创建一个新数组,该数组变为 myArray: updatedContents 而不是将其保留为更新内容的数组。如果您要映射原始数组,则会由于新结构而导致错误。这是故意的吗?
2021-04-06 22:38:11
这是比公认的答案更好的方法,并且按照 React 文档推荐的方式进行。
2021-04-07 22:38:11

函数式组件和 React Hooks

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

最后推送值:

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

在乞讨中推value:

setArray(oldArray => [newValue,...oldArray] );
简短修改 - 开头推送值的片段应为: setArray(oldArray => [newValue,...oldArray] );
2021-03-15 22:38:11
如果我有一个对象数组要添加到现有数组中,我该怎么办?
2021-03-20 22:38:11

你根本不应该操作状态。至少,不是直接的。如果你想更新你的数组,你会想要做这样的事情。

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

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

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

我相信这个答案是正确的,尽管我很想知道为什么我们不能对 state 进行操作,即为什么它是不可取的。经过一番挖掘,我发现了以下React 教程 - 为什么不变性很重要,它有助于填补缺失的信息,并且该教程还用于.slice()创建新数组并保持不变性。谢谢您的帮助。
2021-04-10 22:38:11