为什么 setState 在 React 功能组件中不起作用

Question

const [bullyTypes, setBullyTypes] = React.useState([
  { value: "Exotic", isChecked: false },
  { value: "Pocket", isChecked: false },
  { value: "Classic", isChecked: false },
  { value: "Standard", isChecked: false },
  { value: "Extreme", isChecked: false },
  { value: "XL", isChecked: false },
]);

const handleBullyTypeChange = (event) => {
  let bullyTypesCopy = bullyTypes;
  bullyTypesCopy.forEach((bullyTypeCopy) => {
    if (bullyTypeCopy.value === event.target.value) {
      bullyTypeCopy.isChecked = event.target.checked;
    }
  });
  setBullyTypes(bullyTypesCopy); // not working

  setBullyTypes([
    { value: "Exotic", isChecked: true },
    { value: "Pocket", isChecked: false },
    { value: "Classic", isChecked: false },
    { value: "Standard", isChecked: false },
    { value: "Extreme", isChecked: false },
    { value: "XL", isChecked: false },
  ]); // this is working even though bullyTypesCopy variable has the same value with this array of objects.
};

当我将确切的数组作为参数传递给 setBullyTypes 时，它起作用了但是当我传递包含数组的变量时，即使它们具有相同的值，它也不会工作

请帮助我。谢谢

Answer 1

在事件处理程序中，bullyTypesCopy 是通过引用复制的，而 forEach 没有按照您的预期进行，它只是遍历数组条目。我认为您需要做的是使用 map 以便根据您的情况实际获得新内容。这样 setBullyTypes 应该可以工作。

请尝试以下示例

const [bullyTypes, setBullyTypes] = React.useState([
  { value: "Exotic", isChecked: false },
  { value: "Pocket", isChecked: false },
  { value: "Classic", isChecked: false },
  { value: "Standard", isChecked: false },
  { value: "Extreme", isChecked: false },
  { value: "XL", isChecked: false },
]);

const handleBullyTypeChange = (event) => {
  let bullyTypesCopy = bullyTypes.map((bullyTypeCopy) => {
    if (bullyTypeCopy.value === event.target.value) {
      return { ...bullyTypeCopy, isChecked: !event.target.checked };
    }

    return { ...bullyTypeCopy };
  });

  setBullyTypes(bullyTypesCopy); // not working // this should work now

  setBullyTypes([
    { value: "Exotic", isChecked: true },
    { value: "Pocket", isChecked: false },
    { value: "Classic", isChecked: false },
    { value: "Standard", isChecked: false },
    { value: "Extreme", isChecked: false },
    { value: "XL", isChecked: false },
  ]); // this is working even though bullyTypesCopy variable has the same value with this array of objects.
};

为什么 setState 在 React 功能组件中不起作用

Why is setState not working in React functional component

javascript

reactjs

react-functional-component