如何在reactjs中更新对象数组

问题描述

我有一个状态(对象数组),如下所示:

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

我在前端有3个输入,可以获取图片,名称,作业... 我定义了一个数组来保存对象的集合(由每个人的图片,姓名和工作组成),如下所示:

 var colllection=[]

我使用collection.push({state}),但是它会覆盖collection并且不会在提到的数组末尾添加新状态。有什么想法吗?

解决方法

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

所以编写如下代码:

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

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

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

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

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

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...