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

  • Z时代
  • 2024-01-10
  • 分类：问答

我希望状态在道具更改时重新加载，但这不起作用，并且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>);
}

工作演示

以上是 React.useState不会从props重新加载状态 的全部内容， 来源链接： utcz.com/qa/434363.html

回到顶部