React中useState不从props重新加载状态的问题与解决方案

守拙2024-06-292024-07-28

引言

在使用React开发组件时，我们经常会遇到需要根据props的变化来更新组件状态的情况。然而，React的useState钩子并不会自动根据props的变化来更新状态。本文将探讨这一问题，并提供几种解决方案。

问题描述

在Stack Overflow的一个热门问题React.useState does not reload state from props中，用户遇到了这样的问题：他期望在props变化时，组件的状态能够重新加载，但实际上user变量并没有在下一次useState调用时更新。

示例代码

以下是问题的原始代码示例：

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

问题分析

useState的参数是初始状态，类似于类组件中的构造函数设置状态，它不是用来在重新渲染时更新状态的。如果你希望在props变化时更新状态，应该使用useEffect钩子。

解决方案一：使用useEffect钩子

以下是使用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>);
}

解决方案二：使用key属性触发重新渲染

另一种解决方案是使用key属性来触发组件的重新渲染，而不是使用useEffect来同步React状态。这种方法可以避免由于意外触发useEffect而导致的不必要的状态更新。

// App.jsx
function App() {
  // ...logic here
  return <Avatar initialUser={user} key={user.id} />;
}

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

解决方案三：自定义Hooks

你还可以通过创建自定义Hooks来实现状态与props的同步更新。例如，使用useStateWithDep自定义钩子：

export function useStateWithDep(defaultValue) {
  const [value, setValue] = useState(defaultValue);

  useEffect(() => {
    setValue(defaultValue);
  }, [defaultValue]);

  return [value, setValue];
}

// 使用自定义Hooks
const [user, setUser] = useStateWithDep(props.user);