OnChange函数不允许复选框更新其状态

如何解决OnChange函数不允许复选框更新其状态

我已经制作了自己的Checkbox组件，以便可以更轻松地处理其选中状态：

export default function Checkbox({ name,handleOnChange,defaultState }) {
  const [checked,setChecked] = useState(defaultState || false);

  useEffect(() => {
    defaultState || setChecked(false);
  },[name]);

  function handleCheckedStateOnChange() {
    setChecked((prevState) => {
      console.log(name);
      console.log("prevstate: ",prevState);
      console.log("newstate: ",!prevState);
      return !prevState;
    });
  }

  return (
    <input
      onChange={(e) => {
        e.persist();
        handleCheckedStateOnChange();
        handleOnChange(e);
      }}
      checked={checked}
      type={"checkbox"}
      name={`${name}`}
    />
  );
}

它工作正常。有时。

我有该Checkbox的两个实例，并且两个实例都可以正常工作，但是我不知道发生了什么变化以及为什么其中一个停止了工作，因为我完全没有触及负责该工作的代码，就像这样，它昨晚工作了，现在突然停止了，或者至少我不记得做任何事情了。

无论如何，这是两个复选框：

这是一个复选框，它可以正常工作。

<Checkbox
  name={robotToAdd.name}
  handleOnChange={handleCanChangeConfigOnChange}
/>

这是它的handleOnChange函数，它根据是否检查对象而将对象的canChangeConfig属性简单地更改为true / false：

function handleCanChangeConfigOnChange(e) {
  setRobotToAdd((prevRobot) => {
    return {
      ...prevRobot,canChangeConfig: e.target.checked,};
  });
}

第二个实例位于map函数中，该函数呈现了以下两个复选框：

selectedRobot.Configs.map((config) => (
  <React.Fragment key={`${robotToAdd.Name}-${config}`}>
    <label htmlFor={`${robotToAdd.Name}-${config}`}>{config}</label>
    <Checkbox
      name={`${robotToAdd.name}-${config}`}
      handleOnChange={handleSelectConfigOnChange}
    />
  </React.Fragment>)
)

这是它的handleOnChange函数，它的作用只是将已检查的配置添加到机器人的配置数组中：

function handleSelectConfigOnChange(e) {
  const robotToAddCopy = { ...robotToAdd };
  const config = e.target.name.substring(e.target.name.indexOf("-") + 1);

  const onCheckedAddConfigIfMissing = (config) => {
    !robotToAddCopy.allowedUIs.includes(config) &&
      robotToAddCopy.allowedUIs.push(config);
  };

  const onUncheckedRemoveConfigIfAdded = (config) => {
    robotToAddCopy.allowedUIs.splice(
      robotToAddCopy.allowedUIs.indexOf(config),1
    );
  };

  e.target.checked
    ? onCheckedAddConfigIfMissing(config)
    : onUncheckedRemoveConfigIfAdded(config);

  setRobotToAdd(robotToAddCopy);  // this for some reason seems to be preventing the checkbox from changing its state
}

配置确实已添加到机械手，但是复选框未将其选中状态设置为true。 如果我从输入元素的onChange删除handleOnChange(e)，则所有复选框都将起作用，并且被选中和取消选中。

如果我离开handleOnChange(e)，则只有第一个复选框有效，并且setChecked函数中的控制台日志确实显示了必须设置的正确状态，但是它们根本没有，并且第一个复选框之后的所有复选框的状态都是始终为假（我尝试删除第一个复选框，以查看是否以某种方式相关，但与此无关）。

另外，我还有另一个页面用于编辑机器人，在这里我使用完全相同的代码，并且那里的复选框起作用，它们再次从配置数组中映射，并且我正在使用完全相同的onChange函数，并且唯一的不同是最后一个函数被称为setRobotToEdit(robotToEditCopy)，但其中的代码完全相同。我还尝试向添加密钥也没有帮助。