React: useState不会重置为初始状态。

Question

我正在尝试重新渲染下面组件的选中状态，即使 isChecked 状态为 false，useState 也没有更新为设置的 prop 值，而是保持旧状态。

const CheckListItem = ({ label, onChangeEventHandler, isChecked, index }) => {
  const [checked, setChaecked] = useState(isChecked || false);
  console.log(`${label} checked => `, isChecked); \\ false
  console.log(`${label} checked => `, checked); \\ true || maintaining the old state.
  const localOnChangeHandler = (ev) => {
    if (typeof onChangeEventHandler === "function") {
      setChaecked(ev.target.checked);
      onChangeEventHandler(index, ev.target.checked);
    }
  };


  useEffect(() => {
    console.log(`in useEffect ${label} checked => `, isChecked);
    setChaecked(isChecked);
  }, [isChecked, label]);

  return (
    <li key={index}>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={localOnChangeHandler}
        />
        {label}
      </label>
    </li>
  );
};

checked应该具有在isChecked属性中设置的正确值

- Poojan Bedi

Answer 1

useState的工作方式如预期，传递给它的值仅作为initialState，即使该值发生变化，也不会更新存储的值。

请参阅React文档中关于当属性改变时重置所有状态的内容 - 而不是让代码变得复杂，你可以从父组件传递一个key来创建一个新的组件实例，从而传递一个新的initialState：

<CheckListItem
  initialIsChecked={initialIsChecked}
  {/* When `initialIsChecked` changes, a new
    * `CheckListItem` instance will be created` */}
  key={initialIsChecked}
/>

- Ross Allen

Answer 2

在 setChaecked(ev.target.checked); 中有一个拼写错误，请将其更改为 setChecked(ev.target.checked);

还有，请尝试以下代码

const CheckListItem = ({ label, onChangeEventHandler, isChecked, index }) => {
  const localOnChangeHandler = (ev) => {
    if (typeof onChangeEventHandler === "function") {
      onChangeEventHandler(index, ev.target.checked);
    }
  };

  return (
    <li key={index}>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={localOnChangeHandler}
        />
        {label}
      </label>
    </li>
  );
};

- Antony Jude Shaman

---

可能是打字错误，但在这种情况下并不影响功能。 - undefined

欢迎来到Stack Overflow。请参观tour以了解Stack Overflow的工作原理，并阅读how to ask和how to answer。感谢您最新的贡献。 - undefined

谢谢，通过这样做，它将始终保持在isChecked属性值上，并且永远不会更改为新的值。 - undefined