React 复选框组件取消选中问题 - 在幻灯片更改时清除所有复选框并重新填充数组

Question

我在 React 应用程序中遇到了一个令人困惑的问题，我在其中实现了一组复选框。初始状态是默认选中所有复选框。但是，当我取消选中任何复选框时，似乎会清除所有复选框并仅保留未选中的复选框。此外，在移至下一张幻灯片并返回时，保存所选复选框值的数组将重新填充所有默认值。

import React from "react";
import { Checkbox } from "@carbon/react";

const CheckBoxInput = ({
  item,
  data,
  setSelectedCheckboxValues,
  selectedCheckboxValues,
}) => {
  const [isChecked, setIsChecked] = React.useState(true);

  React.useEffect(() => {
    setIsChecked(selectedCheckboxValues.includes(item.title));
  }, [selectedCheckboxValues, item.title]);

  const handleCheckBoxChange = React.useCallback(
    (event, { checked, id }) => {
      const updatedValues = selectedCheckboxValues.includes(id)
        ? selectedCheckboxValues.filter((val) => val !== id)
        : [...selectedCheckboxValues, id];
      setSelectedCheckboxValues(updatedValues);
    },
    [selectedCheckboxValues, setSelectedCheckboxValues]
  );

  return (
    <>
      <Checkbox
        onChange={handleCheckBoxChange}
        labelText={item.title}
        id={item.title}
        defaultChecked={isChecked}
      />
    </>
  );
};

export default CheckBoxInput;

问题：

1. 取消选中某个复选框会导致清除所有复选框，仅保留未选中的复选框。
2. 移至下一张幻灯片并返回，将使用所有默认值重新填充 selectedCheckboxValues 数组。

问题的沙箱链接

预期行为：

1. 取消选中复选框应更新数组，使其他复选框保持当前状态。
2. 在幻灯片之间移动不应影响复选框或 selectedCheckboxValues 数组的状态。

任何有关解决此问题的帮助或指导将不胜感激。

更新

将项目添加到组件安装上的数组 (

useEffect with empty dependency array

) 就可以了。

幻灯片.js

React.useEffect(() => {
    if (slides[currentSlide]?.content) {
      const allCheckboxValues = slides[currentSlide].content.map(
        (item) => item.title
      );
      setSelectedCheckboxValues(allCheckboxValues);
    }
  }, []);

但是后来我发现，当我将内容数组的位置从第一个元素交换到任何其他位置时，它将再次停止工作。

另一个沙箱中的相同代码，区别在于内容数组不在幻灯片数组的第一个对象中： 沙盒链接

新数组

const SLIDES = [
  {
    title: "Checkboxes",
    text: "We're gonna do 3 fundamental exercises.",
  },
  {
    title: "First, 10 push-ups",
    text: "Do 10 reps. Remember about full range of motion. Don't rush.",
    content: [
      {
        title: "Test1",
      },
      {
        title: "Test2",
      },
      {
        title: "Test3",
      },
      {
        title: "Test4",
      },
      {
        title: "Test5",
      },
    ],
...rest of the elements
  },
];

有什么想法吗？

Answer 1

问题似乎是，当取消选中复选框时，isChecked 状态未正确更新，这会导致不良行为。

要解决此问题，可以直接使用 isChecked 状态来确定复选框的选中状态，而不是依赖 defaultChecked

import React from "react";
import { Checkbox } from "@carbon/react";

const CheckBoxInput = ({
  item,
  selectedCheckboxValues,
  setSelectedCheckboxValues,
}) => {
  const isChecked = selectedCheckboxValues.includes(item.title);

  const handleCheckBoxChange = (event, { id }) => {
    const updatedValues = selectedCheckboxValues.includes(id)
      ? selectedCheckboxValues.filter((val) => val !== id)
      : [...selectedCheckboxValues, id];
    setSelectedCheckboxValues(updatedValues);
  };

  return (
    <>
      <Checkbox
        onChange={handleCheckBoxChange}
        labelText={item.title}
        id={item.title}
        checked={isChecked}
      />
    </>
  );
};

export default CheckBoxInput;