Estoy tratando de obtener los valores actuales del componente Material Ui después de recargar la página o cambiar DOM sin hacer clic en ningún evento. Los valores se muestran desde la base de datos.

Básicamente, estoy comprobando después de hacer clic en el botón Guardar si los valores están actualizados o no, si los valores son valores anteriores, no devolveré nada. Mi función está lista pero no puedo obtener los valores actuales cuando la página se vuelve a cargar, obtengo un status de estado nulo.

Mi interfaz de usuario, los datos se muestran desde la base de datos:

Seleccionar componente:

 const [status, setStatus] = useState<string | null>(null); // My state data.map(details=> { <FormControl sx={{ m: 1, minWidth: 120 }}> <InputLabel id="demo-controlled-open-select-label">Status</InputLabel> <Select labelId="demo-controlled-open-select-label" id="demo-controlled-open-select" open={open} onClose={handleClose} onOpen={handleOpen} value={details.status || status} // value from DB label="Status" onChange={(e) => setStatus(details.status || e.target.value)} > <MenuItem value={'Placed'}> <em>Placed</em> </MenuItem> <MenuItem value={'Packed'}>Packed</MenuItem> <MenuItem value={'Shipped'}>Shipped</MenuItem> <MenuItem value={'Delivered'}>Delivered</MenuItem> <MenuItem value={'Cancel'}>Cancel</MenuItem> </Select> </FormControl> <button onClick={()=>validate (details)}>save</button> })

Mi función:

 const validate = (details)=>{ if (details.status !== status) { console.log('Do somthing') } else { console.log('None') } }