Tengo 2 componentes que importé de la interfaz de usuario del material y también estoy usando mecanografiado. He establecido los valores de la base de datos, estoy tratando de obtener los valores que están establecidos en el componente de forma predeterminada sin hacer clic en el componente.

Básicamente, estoy comprobando 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 cuando la página se vuelve a cargar, me estoy volviendo nulo.

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

Seleccionar componente:

 const [status, setStatus] = useState<string | null>(null); <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>

Selector de fechas:

 const [date, setDate] = useState<Date | null>(null); <LocalizationProvider sx={{ width: 100 }} dateAdapter={AdapterDateFns}> <DatePicker label="Delivery Date" value={details.deliveryDate || date} //Value from DB minDate={new Date()} onChange={(newValue) => { setDate(newValue); }} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider>

Mi función:

 if (details.status !== status || details.deliveryDate !== date) { console.log('Do somthing') } else { console.log('None') }