Javascript 更新React中对象数组中包含的特定对象值

我目前有一个对象数组。每个对象数组都包含一个键，该键为checked，值类型为boolean。当用户选择某个复选框并将该对象的选中值更新为true或false时，我尝试在数组中循环。我遇到的问题是将更新的对象传播回数组，而不创建重复项。我的代码如下：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [arr, setArr] = useState([
    { id: 1, checked: false, name: "Person 1" },
    { id: 2, checked: true, name: "Person 2" }
  ]);

  const updateCheck = (id) => {
    const newArr = [...arr];

    const object = newArr.find((r) => r.id === id);
    const updatedObject = { ...object, checked: !object.checked };
    console.log(updatedObject);
  };

  return (
    <div className="App">
      {arr.map((r) => {
        return (
          <>
            <label>{r.name}</label>
            <input
              type="checkbox"
              checked={r.checked}
              onClick={() => updateCheck(r.id)}
            />
            <br />
          </>
        );
      })}
    </div>
  );
}

从“react”导入{useState}；
导入“/styles.css”；
导出默认函数App（）{
常量[arr，setArr]=useState([
{id:1，选中：false，名称：“Person 1”}，
{id:2，选中：true，名称：“Person 2”}
]);
const updateCheck=（id）=>{
常数newArr=[…arr]；
const object=newArr.find（（r）=>r.id==id）；
const updateObject={…对象，选中：！object.checked}；
console.log（updateObject）；
};
返回(
{arr.map（（r）=>{
返回(
{r.name}
updateCheck（r.id）}
/>


);
})}
);
}

我希望达到的效果是，如果单击Person 1的复选框，我会将其选中值更新为相反的值。因此，在单击其复选框后，人员1的选中值为true

---

附加的是一个代码沙盒

映射数组状态以创建新的数组状态。如果要迭代的项具有匹配的ID，则从回调返回更新的对象，否则返回现有项

const updateCheck = (id) => setArr(
  arr.map(item => (
    item.id !== id ? item : { ...item, checked: !item.checked }
  ))
);

---

映射数组状态以创建新的数组状态。如果要迭代的项具有匹配的ID，则从回调返回更新的对象，否则返回现有项

const updateCheck = (id) => setArr(
  arr.map(item => (
    item.id !== id ? item : { ...item, checked: !item.checked }
  ))
);

---

如果数组有1000000条记录，而我正在查找的记录在数组的第一个单元格中，那么该怎么办？代码仍然可以工作，但前端通常不应该存在如此大的数组。我明白了。谢谢。如果数组有1000000条记录，而我要查找的记录在数组的第一个单元格中，该怎么办？代码仍然可以工作，但前端通常不应该存在如此大的数组。我明白了。非常感谢。