Javascript React Hooks Set函数：如何正确更新对象数组中的属性

我在做这个练习:https://www.reacterry.com/portal/challenges/select-all-checkboxes

如果您查看了check OnChange函数，我try 了多种不同的方法，但它们似乎都不起作用，我想真正了解其中的原因.

我只是对setCheckbox这一部分感到困惑.

他们的:

setCheckboxes(
    checkboxes.map((checkbox) =>
      checkbox.id === id
        ? { ...checkbox, checked: !checkbox.checked }
        : checkbox
    )
  );

我的:

//WHY DOESNT THIS WORK?
    const arr = checkboxes;
    const index = arr.findIndex((x) => x.id === id);
    console.log(index);
    console.log(arr);
    arr[index].checked = !arr[index].checked;
    setCheckboxes(arr);
    console.log(checkboxes);

    //WHY DOESNT THIS WORK?
    setCheckboxes((prevState) => {
      const arr = prevState;
      const index = arr.findIndex((x) => x.id === id);
      console.log(index);
      console.log(arr);
      arr[index].checked = !arr[index].checked;
      return arr;
    });


    //WHY DOESNT THIS WORK?
    setCheckboxes(
      checkboxes.forEach((checkbox) => {
        if (checkbox.id === id) {
          checkbox = { ...checkbox, checked: !checkbox.checked }
        }
      })
    );`

我不完全理解我的方式和这种方式之间的区别的解决方案是:

import React, { useState } from 'react';
import styled from 'styled-components';

const CheckboxList = () => {
const [checkboxes, setCheckboxes] = useState([
  { id: 1, label: 'Dogs', checked: false },
  { id: 2, label: 'Cats', checked: false },
  { id: 3, label: 'Cows', checked: false },
  { id: 4, label: 'Deers', checked: false },
]);

const handleCheckboxChange = (id) => {
  setCheckboxes(
    checkboxes.map((checkbox) =>
      checkbox.id === id
        ? { ...checkbox, checked: !checkbox.checked }
        : checkbox
    )
  );
};

const handleSelectAll = () => {
  setCheckboxes(checkboxes.map((checkbox) => ({ ...checkbox, checked: true })));
};

return (
  <Container>
    <CheckboxContainer data-testid="checkbox-container">
      {checkboxes.map((checkbox, index) => (
        <CheckboxLabel key={checkbox.id}>
          <input
            data-testid={`checkbox-${index + 1}`}
            type="checkbox"
            checked={checkbox.checked}
            onChange={() => handleCheckboxChange(checkbox.id)}
          />
          {checkbox.label}
        </CheckboxLabel>
      ))}
    </CheckboxContainer>
    <SelectAllButton data-testid="button" onClick={handleSelectAll}>Select All</SelectAllButton>
  </Container>
);
};

export default CheckboxList;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 24px;
`;

const CheckboxContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 5px;
`;

const CheckboxLabel = styled.label`
  display: flex;
  align-items: center;
  gap: 5px;
`;

const SelectAllButton = styled.button`
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  margin-top: 24px;

  &:hover {
    opacity: 0.8;
  }
`;

我的代码如下:

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const CheckboxList = () => {
  const [checkboxes, setCheckboxes] = useState([
    { id: 1, label: 'Dogs', checked: false },
    { id: 2, label: 'Cats', checked: false },
    { id: 3, label: 'Cows', checked: false },
    { id: 4, label: 'Deers', checked: false },
  ]);

  const checkedOnChange = (id) => {

    //WHY DOESNT THIS WORK?
    const arr = checkboxes;
    const index = arr.findIndex((x) => x.id === id);
    console.log(index);
    console.log(arr);
    arr[index].checked = !arr[index].checked;
    setCheckboxes(arr);
    console.log(checkboxes);

    //WHY DOESNT THIS WORK?
    setCheckboxes((prevState) => {
      const arr = prevState;
      const index = arr.findIndex((x) => x.id === id);
      console.log(index);
      console.log(arr);
      arr[index].checked = !arr[index].checked;
      return arr;
    });


    //WHY DOESNT THIS WORK?
    setCheckboxes(
      checkboxes.forEach((checkbox) => {
        if (checkbox.id === id) {
          checkbox = { ...checkbox, checked: !checkbox.checked }
        }
      })
    );
  };

  return (
    <Container>
      <CheckboxContainer data-testid="checkbox-container">
        {checkboxes.map((checkbox, index) => (
          <CheckboxLabel key={checkbox.id}>
            <input
              data-testid={`checkbox-${index + 1}`}
              type="checkbox"
              checked={checkbox.checked}
              onClick={() => {
                checkedOnChange(checkbox.id);
              }}
            />
            {checkbox.label}
          </CheckboxLabel>
        ))}
      </CheckboxContainer>
      <SelectAllButton data-testid="button">Select All</SelectAllButton>
    </Container>
  );
};

export default CheckboxList;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 24px;
`;

const CheckboxContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 5px;
`;

const CheckboxLabel = styled.label`
  display: flex;
  align-items: center;
  gap: 5px;
`;

const SelectAllButton = styled.button`
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  margin-top: 24px;

  &:hover {
    opacity: 0.8;
  }
`;

我试了3种不同的方法，但我不确定为什么不起作用.我想充分了解其中的原因.看到一个用尽可能简单的代码编写的解决方案，这样我就可以引用它了.当我说简单时，我的意思是最好没有花哨的语法或扩散运算符.只是想出个pip .谢谢你们.