Estoy usando el siguiente código para representar un campo AutoComplete de IU de material con opciones recuperadas de una API. Me gustaría evitar que se volviera a representar el campo de entrada, pero el país elegido se usa como prop para el componente Country que debe actualizarse onChange . set_alpha3Code no parece actualizar el estado desde useCallback . ¿Cómo soluciono eso?
let AC = memo(AutocompleteCountries) function Show(props: {}) { let [alpha3Code_, set_alpha3Code_] = useState<string>('gbr'); let onChange = useCallback((alpha3Code) => { console.log(alpha3Code_); set_alpha3Code_(alpha3Code); }, []); return ( <div> <AC onChange={onChange}/> {alpha3Code_ ? <Country cca3_={alpha3Code_}/> : null} </div> ) }Dos cosas saltan a la vista sobre ese código:
onChange sin valueonChange sin value En el caso normal, si especifica onChange con un control de entrada, debe especificar el value para decirle al control cuál es el valor actual (actualizado). La documentación para Autocomplete de Material-UI definitivamente sugiere que necesita ambos:
estados controlados
El componente tiene dos estados que se pueden controlar:
- el estado "valor" con la combinación de accesorios
value/onChange. Este estado representa el valor seleccionado por el usuario, por ejemplo, al presionar Enter .
Lo mismo con una input estándar evita que la entrada cambie. No he usado Material-UI Autocomplete , pero sospecho que es similar.
Su código está actualizando el valor de alpha3Code_ (si se llama a onChange con un nuevo valor), pero el console.log en ese código busca uno antiguo:
let onChange = useCallback((alpha3Code) => { console.log(alpha3Code_); // <−−− Uses the *first* `alpha3Code_` only set_alpha3Code_(alpha3Code); }, []); // ^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− Because you haven't included // `alpha3Code_` in these dependencies Pero a pesar de que console.log muestra información obsoleta, el resto del código está bien y funcionará. Volverá a procesar el AC con el código actualizado.
Si desea ver el alpha3Code_ utilizado para la representación, coloque un punto de interrupción en el return y mírelo en el depurador (o mueva el archivo console.log fuera del controlador onChange arriba del return ).