React中如何动态创建带独立状态的可选复选框？

问题背景 #

你通过map批量生成复选框时，因缺少对应每个复选框的状态绑定导致无法正常勾选。不需要动态创建多个useState，用单个对象状态就能高效管理所有复选框的状态。

实现步骤 #

1. 初始化状态对象

用一个对象存储所有复选框的勾选状态，键用每个复选框的唯一标识（比如title，若title可能重复则改用id类唯一值）：

const [checkboxStates, setCheckboxStates] = React.useState(() => {
  // 从someTools生成初始状态，默认全未勾选
  return someTools.reduce((stateObj, tool) => {
    stateObj[tool.title] = false;
    return stateObj;
  }, {});
});

2. 绑定状态到批量生成的复选框

在map渲染时，将每个复选框的value与状态对象对应值绑定，onChange时更新状态：

{someTools.map(({ title }) => (
  <InputCheckbox
    key={title} // React列表渲染必须加唯一key，避免渲染异常
    label={title}
    value={checkboxStates[title]}
    onChange={(value) => {
      // 函数式更新确保基于最新状态修改
      setCheckboxStates(prevState => ({
        ...prevState,
        [title]: value
      }));
      console.log(`${title}: ${value}`);
    }}
  />
))}

关键注意点 #

• 若title存在重复情况，务必使用每个工具的唯一ID（如tool.id）作为状态对象的键，防止不同复选框状态互相覆盖。
• 采用函数式更新（prevState => ...）是为了规避闭包导致的状态过期问题，保证每次更新都基于最新的状态值。

内容的提问来源于stack exchange，提问作者JohnDole