React.useState ne recharge pas l'état à partir des accessoires

Question

Je m'attends à ce que l'état se recharge lors du changement d'accessoires, mais cela ne fonctionne pas et la user n'est pas mise à jour lors du prochain useState , qu'est-ce qui ne va pas?

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

codepen

Answer 1

L'argument passé à useState est l'état initial un peu comme la définition de l'état dans le constructeur pour un composant de classe et n'est pas utilisé pour mettre à jour l'état lors du rendu

Si vous souhaitez mettre à jour l'état lors du changement de prop, utilisez useEffect hook

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

Démo de travail

Answer 2

J'ai créé des crochets personnalisés comme celui-ci:

 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
    ]
}

Utiliser:

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