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

我期望状态在道具更改时重新加载，但这不起作用，并且user变量在下次useState调用时不会更新，这是怎么回事？

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

码笔

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

如果您想在道具变更时更新状态，请使用useEffect钩子

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

工作演示

我们用来useState为变量设置初始值的功能组件，如果我们通过prop传递初始值，它将始终设置相同的初始值，直到您不使用useEffect钩子，

例如你的情况，这将做你的工作

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

传递给useEffect的函数将在将渲染提交到屏幕后运行。

默认情况下，效果会在每个完成的渲染之后运行，但是您可以选择仅在某些值更改后才触发效果。

React.useEffect(FunctionYouWantToRunAfterEveryRender)

如果仅将一个参数传递给useEffect，则它将在每次渲染后运行此方法，您可以FunctionYouWantToRunAfterEveryRender通过将第二个参数传递给useEffect来决定何时触发该方法

React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

如您所知，我正在传递[props.user]现在useEffect仅FunctionYouWantToRunAfterEveryRender在props.user更改时会触发此功能

我希望这有助于您的理解，让我知道是否需要任何改进，谢谢

传递给的参数React.useState()只是该状态的初始值。React不会将其识别为更改状态，而只是设置其默认值。您将需要先设置默认状态，然后有条件地调用setUser(newValue)，它将被识别为新状态，然后重新渲染该组件。

我建议谨慎更新状态，而无需某种条件以防止其不断更新，因此，每次接收到道具时都要重新渲染。您可能需要考虑将状态功能提升到父组件，并将父状态作为道具传递给此头像。

根据关于Hooks的ReactJS文档：

但是，如果组件在屏幕上时好友道具发生变化，会发生什么？我们的组件将继续显示其他朋友的在线状态。这是一个错误。由于取消订阅调用将使用错误的朋友ID，因此在卸载时，我们还会导致内存泄漏或崩溃。

您在此处的唯一互动应该是在道具更改上发生的，这似乎不起作用。您可以（仍根据文档）使用componentDidUpdate（prevProps）主动捕获对道具的任何更新。

PS：我没有足够的代码来判断，但是您不能在Avatar（props）函数中主动setUser（）吗？

在react world中，在这种情况下，您应该在componentWillRecieveProps（nextProps）函数中更新状态。