React中处理两个CheckboxGroup组件时出现迭代错误的技术问询

问题原因 #

错误出在首次勾选任意分组的选项时，prev[name]对应的值是undefined——因为初始状态checkBoxOptions是空对象，还没有该分组的属性。而扩展运算符[...]只能作用于可迭代对象，undefined不满足这个条件，因此抛出类型错误。

修复方案 #

在访问prev[name]时，给它设置默认空数组[]，确保无论首次还是后续操作，都能对数组进行处理。修改changeHandler中的两处数组操作即可：

const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { value, checked, name } = e.target;

  if (checked) {
    setCheckBoxOptions((prev: SelectedOptions) => ({
      ...prev,
      [name]: [...(prev[name] || []), value], // 添加默认空数组兜底
    }));
  } else {
    setCheckBoxOptions((prev: SelectedOptions) => ({
      ...prev,
      [name]: (prev[name] || []).filter((option: string) => option !== value), // 同样添加兜底逻辑
    }));
  }
};

完整修复后的代码 #

interface SelectedOptions {
  [name: string]: string[];
}

const Fruits = [
  {
    label: "Banana",
    value: "Banana",
  },
  {
    label: "Orange",
    value: "Orange",
  },
];

const Vegetable = [
  {
    label: "Carrot",
    value: "Carrot",
  },
  {
    label: "Potatoes",
    value: "Potatoes",
  },
];

export function HomePage() {
  const [checkBoxOptions, setCheckBoxOptions] = useState<SelectedOptions>({});

  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, checked, name } = e.target;

    if (checked) {
      setCheckBoxOptions((prev: SelectedOptions) => ({
        ...prev,
        [name]: [...(prev[name] || []), value],
      }));
    } else {
      setCheckBoxOptions((prev: SelectedOptions) => ({
        ...prev,
        [name]: (prev[name] || []).filter((option: string) => option !== value),
      }));
    }
  };

  return (
    <div>
      <CheckBoxGroup
        checkBoxOptions={Fruits}
        name={"Fruits"}
        changeHandler={changeHandler}
      />
      <CheckBoxGroup
        checkBoxOptions={Vegetable}
        name={"Vegetables"}
        changeHandler={changeHandler}
      />
    </div>
  );
}

可选优化方案 #

如果提前知道所有分组名称，也可以在初始化useState时直接给每个分组设置空数组，从根源避免undefined的问题：

const [checkBoxOptions, setCheckBoxOptions] = useState<SelectedOptions>({
  Fruits: [],
  Vegetables: []
});

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