如何根据点击元素修改数组对象中的boolean属性

问题 #

我通过useState定义了如下任务状态数组：

const [task, setTask] = useState([{name: 'name1', isChecked: false}, {name: 'name2', isChecked: false}])

我尝试了以下处理函数，但它会修改数组中所有对象的isChecked属性：

const handleCheck = (toggle) => {
  setTask(prevState => prevState.map(item => ({
     ...item,
     isChecked: toggle,
  })));
}

请问如何实现仅修改被点击元素对应的数组对象中的isChecked属性？

解决方案 #

要只修改被点击元素的isChecked，你需要在触发handleCheck时传递被点击项的唯一标识（比如name，有id的话用id更稳妥），然后在遍历数组时判断当前项是否为目标项，再修改对应属性。

方法1：通过name标识（适配当前数据结构） #

修改处理函数，接收点击项的name参数，遍历数组时匹配目标项：

const handleCheck = (targetName) => {
  setTask(prevState => prevState.map(item => {
    // 仅匹配到目标name时，翻转isChecked状态
    if (item.name === targetName) {
      return { ...item, isChecked: !item.isChecked };
    }
    // 其他项保持原有状态
    return item;
  }));
}

在点击元素（如复选框）中传递当前项的name：

{task.map(item => (
  <div key={item.name}>
    <input
      type="checkbox"
      checked={item.isChecked}
      onChange={() => handleCheck(item.name)}
    />
    <span>{item.name}</span>
  </div>
))}

方法2：通过索引标识（无唯一属性时备选） #

如果任务项没有唯一name或id，也可以传递当前项的索引：

const handleCheck = (index) => {
  setTask(prevState => prevState.map((item, idx) => {
    if (idx === index) {
      return { ...item, isChecked: !item.isChecked };
    }
    return item;
  }));
}

触发时传递索引：

{task.map((item, index) => (
  <div key={index}>
    <input
      type="checkbox"
      checked={item.isChecked}
      onChange={() => handleCheck(index)}
    />
    <span>{item.name}</span>
  </div>
))}

注意事项 #

• 必须通过解构赋值创建新对象/数组，保证React状态的不可变性，不能直接修改原状态。
• 优先使用唯一标识（如id）而非索引，避免数组排序、元素增减导致的索引错乱问题。

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