传递给React.useState()的参数只是该状态的初始值。React不会将其识别为改变状态，只会设置其默认值。您首先需要设置默认状态，然后有条件地调用setUser(newValue)，它将被识别为一个新状态，然后重新呈现组件。

我建议在没有某种条件的情况下谨慎更新状态，以防止它不断更新，因此每次接收道具时都要重新渲染。您可能想考虑将状态功能提升到父组件，并将父组件的状态作为道具传递给这个Avatar。

I've seen almost all the answers to this question promoting a bad pattern: updating state as a result of a prop change inside a useEffect call. The useEffect hook is used for synchronizing your React components with external systems. Using it for synchronizing React states can potentially lead to bugs (because re-renders caused by other effects can lead to unintended state updates). A better solution would be to trigger a reconciliation with a key prop change in the <Avatar /> component from its parent:

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

在本例中，您可以将该关键道具视为useEffect的依赖数组，但是由于组件呈现所触发的意外useEffect调用，您将不会触发意外的状态更改。

你可以在这里阅读更多信息: 为国家添加道具

以及更多关于如何useEffect可能是一个脚枪的信息，在这里:

你可能不需要效果

根据ReactJS关于Hooks的文档:

但是如果好友道具在组件出现在屏幕上时发生了变化会发生什么呢?我们的组件将继续显示不同朋友的在线状态。这是一个bug。卸载时还会导致内存泄漏或崩溃，因为取消订阅调用将使用错误的好友ID。

你在这里唯一的互动应该发生在道具的改变上，这似乎不起作用。您可以(仍然根据文档)使用componentDidUpdate(prevProps)来主动捕获对道具的任何更新。

PS:我没有足够的代码来判断，但你不能主动setUser()在你的Avatar(props)函数?

传递给React.useState()的参数只是该状态的初始值。React不会将其识别为改变状态，只会设置其默认值。您首先需要设置默认状态，然后有条件地调用setUser(newValue)，它将被识别为一个新状态，然后重新呈现组件。

我建议在没有某种条件的情况下谨慎更新状态，以防止它不断更新，因此每次接收道具时都要重新渲染。您可能想考虑将状态功能提升到父组件，并将父组件的状态作为道具传递给这个Avatar。

我创建了这样的自定义钩子:

const usePrevious = value => {
   const ref = React.useRef();

   React.useEffect(() => {
       ref.current = value;
   }, [value]);

   return ref.current;
}

const usePropState = datas => {
    const [dataset, setDataset] = useState(datas);
    const prevDatas = usePrevious(datas);

    const handleChangeDataset = data => setDataset(data);

    React.useEffect(() => {
        if (!deepEqual(datas, prevDatas)) // deepEqual is my function to compare object/array using deep-equal
            setDataset(datas);
    }, [datas, prevDatas]);

    return [
        dataset,
        handleChangeDataset
    ]
}

使用方法:

const [state, setState] = usePropState(props.datas);

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

演示工作