Espero que el estado se vuelva a cargar en el cambio de accesorios, pero esto no funciona y la variable del user no se actualiza en la próxima llamada de useState , ¿qué sucede?
function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); }El argumento pasado a useState es el estado inicial muy parecido a establecer el estado en el constructor para un componente de clase y no se usa para actualizar el estado al volver a renderizar
Si desea actualizar el estado en el cambio de prop, utilice 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>); }Componentes funcionales donde usamos useState para establecer valores iniciales a nuestra variable, si pasamos el valor inicial a través de accesorios, siempre establecerá el mismo valor inicial hasta que no haga uso del gancho useEffect ,
por ejemplo, su caso, esto hará su trabajo
React.useEffect(() => { setUser(props.user); }, [props.user])La función pasada a useEffect se ejecutará después de que el procesamiento se confirme en la pantalla.
De forma predeterminada, los efectos se ejecutan después de cada procesamiento completo, pero puede optar por activarlos solo cuando ciertos valores han cambiado.
React.useEffect(FunctionYouWantToRunAfterEveryRender) si pasa solo un argumento a useEffect, ejecutará este método después de cada renderizado, puede decidir cuándo activar esta FunctionYouWantToRunAfterEveryRender pasando el segundo argumento a useEffect
React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user]) como nota que estoy pasando [props.user] ahora, useEffect solo activará esta función FunctionYouWantToRunAfterEveryRender cuando props.user cambie
espero que esto ayude a su comprensión avíseme si se requieren mejoras gracias
puede crear sus propios ganchos simples personalizados para esto. Los ganchos cambiaron el valor predeterminado cuando cambió.
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]; }#Ejemplo
const [user, setUser] = useStateWithDep(props.user);