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

密码笔

标签： reactjsreact-hooks

Answer 1

传递给 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>);
}

工作演示