Tengo este menú desplegable de selección de reacción:
const handleSyncList = () => { ...... }; const [exchangeId, setExchangeId] = useState(''); <select onSelect={e => setExchangeId(e.target.value)} onChange={handleSyncList}> <option value="">All Exchanges</option> {exchangesList.map(otherEntity => ( <option value={otherEntity.exchangeId}> ....... </option> )) : null} </select> Necesito establecer el valor seleccionado en exchangeId y llamar a handleSyncList . ¿Es posible establecer primero el valor de la opción y luego llamar a handleSyncList usando useEffect de esta manera:
useEffect(callback, [dep])Puede configurar handleSyncList como devolución de llamada de useEffect y definir exchangeId como una de las dependencias de useEffect , y cada vez que se actualice exchangeId , su handleSyncList llamará con el valor de actualización de exchangeId , así:
const exchangesList = ['a','b','c'] const App = ()=> { const [exchangeId, setExchangeId] = React.useState(''); const handleSyncList = () => { console.log(exchangeId); // or whatever else }; React.useEffect(handleSyncList , [exchangeId]); return ( <select onChange={e => setExchangeId(e.target.value)}> <option value="">All Exchanges</option> {exchangesList.map(otherEntity => ( <option value={otherEntity}> {otherEntity} </option> )) } </select> ) } ReactDOM.render(<App/>, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div> Tenga en cuenta que, de esta manera, handleSync llamará al primer renderizado, puede controlarlo verificando que exchangeId tenga valor o no, o puede definir una variable reaccionando useRef y controle si es el primer renderizado del componente o no, así :
... const [exchangeId, setExchangeId] = React.useState(''); const isMounted = React.useRef(false); const handleSyncList = () => { if(isMounted.current){ console.log(exchangeId); // or whatever else } }; React.useEffect(handleSyncList , [exchangeId]); React.useEffect(()=> { isMounted.current = true } , []); ...Sí, pero debe asegurarse de ejecutarlo solo cuando se cambia el ID de exchangeId , por lo que debe almacenar el valor de ID de exchangeId anterior en algún lugar, idealmente en la referencia.
const [exchangeId, setExchangeId] = useState(''); const lastExchangeId = useRef(exchangeId); //... useEffect(() => { if (exchangeId !== lastExchangeId.current) { handleSyncList(); lastExchangeId.current = exchangeId; } }, [exchangeId])No puedo comentar la publicación. Propongo usar la devolución de llamada useState justo después de configurar el estado.
<select onChange={e => setExchangeId(e.target.value, () => handleSyncList()}>