问题描述
我有一个状态(对象数组),如下所示:
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])
。