Reaguj.useState nie przeładowuje stanu z właściwości

Parametr przekazany do React.useState() jest tylko wartością początkową dla tego stanu. React nie rozpozna tego jako zmieniając Stan, ustawiając jedynie jego domyślną wartość. Najpierw należy ustawić domyślny stan, a następnie warunkowo wywołać setUser(newValue), który zostanie rozpoznany jako nowy stan i ponownie wyrenderować komponent.

Zalecałbym ostrożność w aktualizacji stanu bez jakiegoś warunku, aby nie aktualizować go stale, a zatem ponownie renderować za każdym razem są odbierane. Warto rozważyć przeniesienie funkcji stanu do komponentu nadrzędnego i przekazanie stanu rodzica do tego awatara jako rekwizytu.

Komponenty funkcyjne, w których używamy useState do ustawienia wartości początkowych do naszej zmiennej, jeśli przekażemy wartość początkową przez właściwości, będzie ona zawsze ustawiać tę samą wartość początkową, dopóki nie użyjesz useEffect Hooka,

Na przykład twój przypadek to zrobi Twoją pracę

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

Funkcja przekazana do useEffect zostanie uruchomiona po zatwierdzeniu renderowania na ekranie.

Domyślnie efekty uruchamiane są po każdym zakończonym renderowaniu, ale można je uruchamiać tylko wtedy, gdy określone wartości mają zmieniony.

React.useEffect(FunctionYouWantToRunAfterEveryRender)

Jeśli przekażesz tylko jeden argument do useEffect, to ta metoda uruchomi się po każdym renderowaniu możesz zdecydować, kiedy odpalić FunctionYouWantToRunAfterEveryRender, przekazując drugi argument do useEffect

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

Jak zauważyłeś, przekazuję [rekwizyty.użytkownik] teraz useEffect uruchomi tę funkcję FunctionYouWantToRunAfterEveryRender tylko wtedy, gdy props.user zostanie zmieniona

Mam nadzieję, że to pomoże Ci zrozumieć daj mi znać, jeśli wymagane są jakieś ulepszenia dzięki

Stworzyłem własne Hooki w ten sposób:

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

Do użycia:

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

Zgodnie z dokumentacją ReactJS o Hookach:

Ale co się stanie, jeśli rekwizyt znajomego zmieni się, gdy komponent jest na ekranie? Nasz komponent będzie nadal wyświetlał status online innego znajomego. To jest pluskwa. Spowodowalibyśmy również wyciek pamięci lub awarię podczas odmontowywania, ponieważ połączenie rezygnacji z subskrypcji używałoby niewłaściwego identyfikatora znajomego.

Twoja jedyna interakcja tutaj powinna mieć miejsce na zmianie rekwizytów, co wydaje się nie działać. Mógłbyś (nadal zgodnie z doc) użyj komponentudidupdate (prevProps), aby proaktywnie złapać każdą aktualizację właściwości.

PS: nie mam wystarczająco dużo kodu do oceny, ale czy nie mógłbyś aktywnie ustawić user () wewnątrz funkcji Avatara (rekwizytów)?

W reactowym świecie, powinieneś zaktualizować swój stan w funkcji componentWillRecieveProps (nextProps), w takich przypadkach.