En una aplicación React actualmente hay una lista desplegable que tiene un evento onChange que llama a una función. En esa función (cuando los usuarios seleccionan una opción diferente en el ddl), lo que me gustaría lograr es actualizar otro componente personalizado y pasar un valor a ese componente.
Entonces, en la parte delantera hay un simple menú desplegable:
<Dropdown value={selectedOption} options={dropDownOptions} onChange={onChange} />Luego hay una función onChange que se activa cuando se selecciona el menú desplegable:
const onChange = React.useCallback( e => { const optionId = e.target.value; const optionData = keyedOptions[optionId]; // refresh DownloadSelector custom component // something like this which doesn't work {optionData.id && <DownloadSelector eventId={optionData.id} />} }También puedo importar el componente personalizado en la parte superior del archivo normalmente, como:
import { DownloadSelector } from '../../../SearchAndSort/DownloadSelector';El componente personalizado al definirlo tiene un valor pasado así:
export const DownloadSelector = ({eventId}) => { Si se actualiza toda la página, se cargará el componente DownloadSelector personalizado. Me gustaría que eso sucediera en onChange.
¿Cómo en la función onChange podemos actualizar/recargar/setState/actualizar el componente DownloadSelector ?
const [eventId, setEventId] = React.useState() const onChange = React.useCallback(() { // .... // replace newState with a updated value setEventId( newState ) }, []) return <DownloadSelector eventId={eventId} />En DownloadSelector haz algo como esto:
function useForceUpdate(){ const [value, setValue] = useState(0); // integer state return () => setValue(value => value + 1); // update state to force render } const DownloadSelector = ({eventId}) => { const forceUpdate = useForceUpdate(); // .... return <Dropdown value={selectedOption} options={dropDownOptions} onChange={onChange} forceUpdate={forceUpdate} /> }Y luego en onChange en el componente desplegable:
const onChange = React.useCallback(() { // .... forceUpdate() }, [])La respuesta a mi pregunta está en el componente personalizado que quería volver a representar cuando se cambia el menú desplegable (un componente diferente) para definir las variables que están cambiando en el estado del componente personalizado DownloadSelector (no local let) como:
const [isMyVar] = useState(false); Luego, cuando se actualiza isMyVar , el estado cambia y el componente se vuelve a representar. La respuesta no fue (lo que pensé originalmente) fue tener el código en el evento onChange del segundo componente. Agradezco a @Hostek por su ayuda.