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

Question

我期待状态重新加载道具更改，但这不起作用，并且user变量在下一次useState调用时没有更新，这是怎么了？

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

代码笔

Answer 1

您可以为此创建自己的自定义简单挂钩。钩子在更改默认值时更改了默认值。

https://gist.github.com/mahmut-gundogdu/193ad830be31807ee4e232a05aeec1d8

    import {useEffect, useState} from 'react';

    export function useStateWithDep(defaultValue: any) {
      const [value, setValue] = useState(defaultValue);
    
      useEffect(() => {
        setValue(defaultValue);
      }, [defaultValue]);
      return [value, setValue];
    }

#范例

const [user, setUser] = useStateWithDep(props.user);

Answer 2

在函数组件中，我们使用useState为变量设置初始值，如果我们通过props传递初始值，它将始终设置相同的初始值，直到您不使用use效应钩子，

例如，您的案例这将完成您的工作

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

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

默认情况下，效果在每次完成渲染后运行，但您可以选择仅在某些值发生更改时激发效果。

React.useEffect(FunctionYouWantToRunAfterEveryRender)

如果只将一个参数传递给useEffect，它将在每次渲染后运行此方法。通过将第二个参数传递给useEffect，您可以决定何时启动此函数YouwanttoRunafter EveryRender

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

当你注意到我正在通过[props.user]现在use效应将只触发这个FunctionYouWantToRunAfterAnyRender函数时props.user被改变

我希望这有助于你的理解让我知道如果有任何改进需要感谢

Answer 3

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

如果您想更新prop更改的状态，请使用use效应钩子

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

工作演示