时间戳

首页 > 解决方案 > 如何更新reactjs中的对象数组

javascript - 如何更新reactjs中的对象数组

问题描述

我有一个状态（对象数组），如下所示：

 const [state,setstate]=useState({picture:'',name:'',job:''})

我在前端有 3 个输入，它们获取图片、姓名、工作......我定义了一个数组来保存对象集合（由每个人的图片、姓名和工作组成），如下所示：

 var colllection=[]

我使用 collection.push({state}) ，但它会覆盖集合并且不会将新状态添加到提到的数组的末尾。知道吗？

标签： javascriptarraysreactjsobjectupdating

解决方案

对于反应状态，您需要替换值而不是更改它。

所以编写如下代码：

const [state, setstate] = useState([]);

const handleAddPerson = person => useState(prev => ([...prev, person]));

当我们想要添加一个人时，我们将状态设置为一个新数组，其中包含原始数组的内容和新对象。

useState可以传递一个函数而不是传递一个新值，该函数将状态保持的先前值作为参数并返回该状态的新值。

我习惯于使用语法糖来创建一个新数组[...prev, person]，这可以用普通的 javascript 编写为prev.concat([person]).

推荐阅读