Tengo dos menús desplegables, los valores del segundo menú desplegable deben actualizarse según el estado del primer menú desplegable. Aunque el código parece funcionar, recibo advertencias de out-of-range value . ¿Cómo puedo mejorar este código para que desaparezcan las advertencias?
El componente completo en caso de que se prefiera.
const MyForm = () => { const [state1, setState1] = useState(list1[0]); const [state2, setState2] = useState(list2[0]); return ( <> <FormControl fullWidth sx={{ marginY: "16px" }}> <InputLabel>List 1</InputLabel> <Select label="List 1" value={state1.code} onChange={(e) => { const tmpState1 = list1.find( (item) => item.code === e.target.value ); setState1(tmpState1); }} > {list1.map((item) => { return ( <MenuItem value={item.code} key={item.name}> {item.name} </MenuItem> ); })} <MenuItem value={""}>All</MenuItem> </Select> </FormControl> <FormControl fullWidth sx={{ marginY: "16px" }}> <InputLabel>List 2</InputLabel> <Select label="List 2" value={state2.name} onChange={(e) => { const tmpState2 = list2.find( (item) => item.name === e.target.value ); console.log(tmpState2); setState2(tmpState2); }} > {list2 .filter((item) => item.code === state1.code) .map((item) => { return ( <MenuItem value={item.name} key={item.name}> {item.name} </MenuItem> ); })} </Select> </FormControl> </> ); }; export default MyForm;El problema era que cuando se actualizaba la variable state1 , el valor del segundo menú desplegable no se encontraba en la lista de <MenuItem> s actualizados. Por lo tanto, lanza una advertencia.
Una solución simple es actualizar el valor en el segundo menú desplegable cuando cambia el state1 :
//... <FormControl fullWidth sx={{ marginY: "16px" }}> <InputLabel>List 1</InputLabel> <Select label="List 1" value={state1.code} onChange={(e) => { const tmpState1 = list1.find( (item) => item.code === e.target.value); {/* this is the fix */} setState2(list2.find((item) => item.code === tmpState1.code)); setState1(tmpState1); }} > {list1.map((item) => { return ( <MenuItem value={item.code} key={item.name}> {item.name} </MenuItem> ); })} <MenuItem value={""}>All</MenuItem> </Select> </FormControl> //...