更新对象的反应钩子状态的正确语法是什么

Question

我有一个包含 100 个清单的清单 const [checkList, setCheckList] = React.useState({"checkA": false, "checkB": false....100 items})

在onClick中，我愿意

 setCheckList({
       ...checkList,
       "checkA": event.target.checked,
  });

这很好用，但是当我使用 .map((item) => {...})

循环时

setCheckList({
    ...checkList,
    item: event.target.checked,
});

创建名为“item”的第 101 个复选框

我错过了什么？

Answer 1

那是因为您使用“item”作为属性名称，您应该像这样将项目放在方括号中：

setCheckList({
    ...checkList,
    [item]: event.target.checked,
});

Answer 2

更新输入对象状态时的一种常见方法是将 event.target.name 作为键传递给您的更新状态。您还应该在输入时声明一个带有正确匹配键的 name 属性：

setCheckList({
    ...checkList,
    [event.target.name]: event.target.checked,
});