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

码笔

Answer 1

我已经看到这个问题的几乎所有答案都宣扬了一种错误的模式：由于调用内的prop 更改useEffect而更新状态。该useEffect钩子用于将 React 组件与外部系统同步。使用它来同步React 状态可能会导致错误（因为其他效果引起的重新渲染可能会导致意外的状态更新）。更好的解决方案是通过父组件中的 prop 更改来触发协调：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在这种情况下，您可以将该prop 视为useEffect 的依赖项数组，但您不会因useEffect组件渲染触发的意外调用而触发意外的状态更改。

您可以在这里阅读更多相关内容： Putting Props To State

useEffect有关脚枪的更多信息，请参见：

您可能不需要效果

Answer 2

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

工作演示

Answer 3

我们用来useState为变量设置初始值的函数式组件，如果我们通过 props 传递初始值，它将始终设置相同的初始值，直到您不使用useEffecthook，

例如你的情况，这将完成你的工作

 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更改时触发此功能

我希望这有助于您的理解，如果需要任何改进，请告诉我，谢谢

Answer 4

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

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