Estoy pasando mi aplicación del modelo de clase a los ganchos y en mi código tengo una lista desplegable que cuando ejecuta el método onChange hace esto:
filter(event) { this.setState({ selectedFilter: event.target.value },() => { this.chargeInfo(); }); }En mi clase, el modelo funciona perfectamente, pero no sé cómo hacer esto con los ganchos, estoy pasando el método chargeInfo() y la variable selectedFilter por los accesorios porque este componente es un niño, así que lo que tengo es este código:
<Dropdown onChange={onChangeDropdown} /> const onChangeDropdown = function(event) { props.changeSelectedFilter(event.target.value);//this do setSelecedFilter in the parent props.chargeInfo();//this is the method of the parent that do something }¿Cómo puedo adaptar esto en un modo de sincronización que ejecute primero props.changeSelectedFilter y luego props.chargeInfo?
Es posible que deba usar el State Hook de esta manera:
// setting up the default dropdown value const [dropdownValue, setDropdownValue] = useState('Some Value'); // later, setting a new dropdown value setDropdownValue('New Value')Consulte https://reactjs.org/docs/hooks-state.html para obtener más información
Lo resolví usando useEffect:
useEffect( () => { // eslint-disable-next-line react-hooks/exhaustive-deps props.chargeInfo();}, [props.selectedFilter] ) const onChangeDropdown = function(event) { props.changeSelectedFilter(event.target.value); } return( <Dropdown style={{ marginRight: 10, }} value={props.selectedFilter} options={filters} onChange={onChangeDropdown} optionLabel="name" placeholder="Filter by" /> )