如何更新 reactjs 中的对象数组
2020-09-10
131
我有一个状态（对象数组），如下所示：
const [state,setstate]=useState({picture:'',name:'',job:''})
我在前端有 3 个输入，分别是图片、姓名、工作... 我定义一个数组来保存对象集合（包括每个人的图片、姓名和工作），如下所示：
var colllection=[]
我使用 collection.push({state}) ，但它会覆盖集合，并且不会将新状态添加到上述数组的末尾。有什么想法吗？
1个回答
对于反应状态，您需要替换值而不是更改它。
因此，编写如下代码：
const [state, setstate] = useState([]);
const handleAddPerson = person => useState(prev => ([...prev, person]));
当我们想要添加一个人时，我们将状态设置为一个新数组，该数组包含原始数组的内容和新对象。
useState
而不是传递新值，可以传递一个函数，该函数以状态保存的先前值作为参数并返回状态的新值。
我习惯使用语法糖来创建一个新数组
[...prev, person]
，这可以用纯 JavaScript 写成
prev.concat([person])
。
Tom
2020-09-10