Reactjs 使用useEffect重新初始化useState

我有一个内部带有

的组件。使用

初始值

初始化组件。

onChange

处理程序更新

值。它看起来像这样：

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

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

正如问题中所提出的，a
useEffect
是正确的解决方案

const Editable=（{initialValue}）=>{
const[value，setValue]=使用状态（initialValue）；
useEffect（（）=>setValue（initialValue），[initialValue]）；
返回(
setValue（event.currentTarget.value）}>
{value}
);
};
正如问题中所建议的那样，
useffect
是正确的解决方案

const Editable=（{initialValue}）=>{
const[value，setValue]=使用状态（initialValue）；
useEffect（（）=>setValue（initialValue），[initialValue]）；
返回(
setValue（event.currentTarget.value）}>
{value}
);
};
这样使用完全没问题。您可能需要将
initialValue
重命名为类似
value
的名称，以明确它不仅仅是默认值

要清除代码，您可以创建一个自定义钩子来处理这种情况，如下所示：

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

这将使您的代码更具可读性，并使代码在您希望的代码的其他部分中可重用。
这样使用完全可以。您可能需要将
initialValue
重命名为类似
value
的名称，以明确它不仅仅是默认值

要清除代码，您可以创建一个自定义钩子来处理这种情况，如下所示：

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

这将使您的代码更具可读性，并使代码可在您需要此类行为的代码的其他部分中重用。
您不应在相同的上下文中使用相同的变量名。它创建一个阴影变量。在这种情况下，请参考eslint规则“无阴影”，将func prop
value
重命名为
newValue
，或者smth elseI已经有了一个可以正常工作的自定义钩子，完全符合您的建议。感谢您确认：）异步执行
useffect
不是一个问题吗？@magic\u al一点也不
useState
也是异步执行的，在这个自定义钩子中，只要调用
setInternalValue
就只更新值，然后向下传递更新后的值。它的逻辑和代码与您在组件中正确实现它的逻辑和代码相同。它只允许您将代码移动到另一个文件中，以便在应用程序的其他部分重复使用。@Linschlager如果useEffect和useState都是异步执行的，则上述示例理论上可能会导致两次渲染。这就是我的意思。在相同的上下文中不应该使用相同的变量名。它创建一个阴影变量。在这种情况下，请参考eslint规则“无阴影”，将func prop
value
重命名为
newValue
，或者smth elseI已经有了一个可以正常工作的自定义钩子，完全符合您的建议。感谢您确认：）异步执行
useffect
不是一个问题吗？@magic\u al一点也不
useState
也是异步执行的，在这个自定义钩子中，只要调用
setInternalValue
就只更新值，然后向下传递更新后的值。它的逻辑和代码与您在组件中正确实现它的逻辑和代码相同。它只允许您将代码移动到另一个文件中，以便在应用程序的其他部分重复使用。@Linschlager如果useEffect和useState都是异步执行的，则上述示例理论上可能会导致两次渲染。这就是我的意思。