如何更新reactjs中的对象数组

Question

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

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

我在前端有3个输入，分别是图片、姓名、工作。。。我定义了一个数组来保存一组对象(包括每个人的照片、姓名和工作(，如下所示：

var colllection=[]

我使用collection.push(｛state｝(，但它覆盖了collection，并没有在提到的数组末尾添加新的状态。知道吗？

Answer 1

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

所以代码如下：

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

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

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

我习惯了创建新数组[...prev, person]的语法糖——这可以用普通的javascript写成prev.concat([person])。