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>
  );
};

使用useEffect重新初始化useState

2 个答案: