使用 useEffect 重新初始化 useState

Question

我有一個帶有<div contentEditable />組件。 該組件使用initialValue初始化。 onChange處理程序更新value 。 它看起來像這樣：

const Editable = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue);

  return (
    <div contentEditable onChange={event => setValue(event.currentTarget.value)}>
      {value}
    </div>
  );
};

現在，如果父組件傳遞一個新的initialValue 、 value和因此div的內容不會更新，因為狀態已經初始化。

在這種情況下使用useEffect是否可以，或者還有其他方法嗎？

const Editable = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue);

  useEffect(() => setValue(initialValue), [initialValue]);

  return (
    <div contentEditable onChange={event => setValue(event.currentTarget.value)}>
      {value}
    </div>
  );
};

Answer 1

以這種方式使用它完全沒問題。 您可能希望將initialValue重命名為value ，以表明它不僅僅是默認值。

你可以做的來清理你的代碼是創建一個自定義鈎子來處理這樣的確切情況：

const useUpdatingState = (value) => {
  const [internalValue, setInternalValue] = useState(value);
  useEffect(() => {
    setInternalValue(value)
  }, [value]);
  return [internalValue, setInternalValue];
};

這將使您的代碼更具可讀性，並使代碼可在您希望此類行為的其他代碼部分中重用。

Answer 2

正如問題中所提出的， useEffect是正確的解決方案。

const Editable = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue);

  useEffect(() => setValue(initialValue), [initialValue]);

  return (
    <div contentEditable onChange={event => setValue(event.currentTarget.value)}>
      {value}
    </div>
  );
};