我目前有一个对象数组。每个对象数组包含一个已选中的键和一个布尔类型的值。我试图在用户选择某个复选框时循环遍历该数组，并将该对象的已选中值更新为 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>
  );
}

我想要实现的预期效果是，如果单击了 Person 1 的复选框，我会将其已选中的值更新为相反的值。因此，在单击复选框后，人员 1 的选中值将为 true。

附件是代码沙盒 https://codesandbox.io/s/elegant-haibt-hycmy?file=/src/App.js