Tengo un enlace personalizado con un estado de uso que contiene un valor booleano y una función que me permite actualizar el estado. Esperaba que reaccionara para activar un renderizado basado en el nuevo valor, pero no pasa nada.
import React, { useState, useEffect } from 'react'; function useHook() { const [value, setValue] = useState(false); const onClick = (v) => { setValue(v); }; return {value, onClick}; } const Switcher = () => { const {value, onClick} = useHook(); return <button onClick={() => onClick(!value)}>test</button>; }; export default function App() { const {value} = useHook(); useEffect(() => { console.log('effect', value); }, [value]); return ( <div> <h1>Hello StackBlitz!</h1> <p>result {JSON.stringify(value)}</p> <Switcher /> </div> ); }Los ganchos son formas de reutilizar el comportamiento, no el estado . En otras palabras, está creando 2 estados de value cuando llama a useHook en App y Switcher, respectivamente. Si desea reutilizar el estado sin solo pasarlo a través de accesorios, deberá usar algo como redux o la API de contexto .
Tiene dos llamadas separadas a useHook que crea estados separados. Lo que quiere es un estado que se use en ambos componentes. Intente pasar value y onClick como accesorios a Switcher desde el componente principal de la siguiente manera:
import React, { useState, useEffect } from 'react'; function useHook() { const [value, setValue] = useState(false); const onClick = (v) => { setValue(v); }; return {value, onClick}; } const Switcher = ({onClick, value}) => { return <button onClick={() => onClick(!value)}>test</button>; }; export default function App() { const {value, onClick} = useHook(); useEffect(() => { console.log('effect', value); }, [value]); return ( <div> <h1>Hello StackBlitz!</h1> <p>result {JSON.stringify(value)}</p> <Switcher onClick={onClick} value={value}/> </div> ); }