dime, quiero reescribir el componente escrito en los métodos del ciclo de vida en ganchos, pero no sale exactamente en este lugar, no funciona como debería. ¿Cómo reescribirlo correctamente?
componentDidMount() { this.updateUser(); } componentDidUpdate(prevProps){ if (this.props.userId !== prevProps.userId) { this.updateUser(); console.log('update') } } updateUser = () => { const {userId} = this.props; if (!userId) { return; } this.onUserLoading(); this.API .getUser(userId) .then(this.onUserLoaded) .catch(this.onError)he modificado con reaccionar nuevos ganchos,
componentDidMount significa useEffect(()=>{},[]) componentDidUpdate significa useEffect((prev)=>{},[YOUR UPDATE DATA VARIABLE])
esto se verá así ahora, su función es como a continuación,
updateUser = () => { if (!userId) { return; } this.onUserLoading(); this.API .getUser(userId) .then(this.onUserLoaded) .catch(this.onError) }esto se convertirá en componente funcional,
const [userId,setUserId] = useState(props.userId); // way 1 //const userId = {props}; // way 2 useEffect((prevProps)=>{ updateUser(); if(userId !== prevProps.userId){ updateUser(); console.log('update') } },[userId, updateUser])Tenga en cuenta que el efecto depende de updateUser y la devolución de llamada pasada a useEffect no recibe ningún argumento. Aquí hay un ejemplo de trabajo:
const User = React.memo(function User({ userId }) { const [userResult, setUserResult] = React.useState(""); //create this function only on mount const onUserLoaded = React.useCallback( (result) => setUserResult(result), [] ); //do not re create this function unless userId changes const onUserLoading = React.useCallback(() => { setUserResult(`user loading for ${userId}`); setTimeout( () => onUserLoaded(`result for user:${userId}`), 1000 ); }, [userId, onUserLoaded]); //do not re create this function unless userId // or onUserLoading changes, onUserLoading only // changes when userId changes const updateUser = React.useCallback(() => { if (!userId) { return; } onUserLoading(); }, [onUserLoading, userId]); //run the effect when updateUser changes // updateUser only changes when userId changes React.useEffect(() => updateUser(), [updateUser]); return <div>user result:{userResult}</div>; }); const App = () => { const [userId, setUserId] = React.useState(1); return ( <div> <button onClick={() => setUserId(userId + 1)}> Change User ID </button> <User userId={userId} /> </div> ); }; ReactDOM.render(<App />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>