React.useState 不会从 props 重新加载状态

Question

我希望状态会在道具更改时重新加载，但这不起作用，并且 user 变量不会在下一次更新 useState 调用，有什么问题？

 function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ?
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

密码笔

原文由 vitalyster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我已经看到这个问题的几乎所有答案都在宣传一个不好的模式： 由于 useEffect 调用中的 道具更改 而更新状态。 useEffect 钩子用于将您的 React 组件与外部系统同步。使用它来同步 React 状态 可能会导致错误（因为由其他效果引起的重新渲染可能会导致意外的状态更新）。更好的解决方案是触发与 key 来自其父组件的 <Avatar /> 组件中的道具更改的 和解：

 // App.jsx
function App() {
   // ...logic here
   return <Avatar initialUser={user} key={user.id} />
}

// Avatar.jsx
function Avatar({ initialUser }) {
 // I suppose you need this component to manage it's own state
 // otherwise you can get rid of this useState altogether.
  const [user, setUser] = React.useState(initialUser);
  return user.avatar ? (
    <img src={user.avatar} />
  ) : (
    <p>Loading...</p>
  );
}

在这种情况下，您可以将 key 视为 useEffect 的依赖数组，但您不会因为组件触发的意外 useEffect 调用而触发意外的状态更改呈现。

您可以在此处阅读有关此内容的更多信息： Puting Props To State

还有更多关于 useEffect 可能是脚枪的信息，在这里：

你可能不需要效果

原文由 Alejandro Rodriguez P. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

传递给 useState 的参数是初始状态，就像在类组件的构造函数中设置状态一样，不用于在重新渲染时更新状态

如果你想在 prop 改变时更新状态，使用 useEffect hook

 function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ?
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

工作演示

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议