警告:失败的道具类型:提供给"ForwardRef(Select)"的道具"childre

Question

如果变量为true，但组件渲染器显示警告Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode.时，我将尝试渲染某些输入

这是Material ui对话框的代码，它接收一些道具，其中一个是我验证的，以显示或不显示一对选择输入。

我所做的是验证变量是否为真，如果不是，则显示它们，不要显示它们。

states...
requests...
onSubmit...
return (
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
<Collapse in={open}>
<Alert severity={severity}>{alertMsg}</Alert>
</Collapse>
<DialogTitle>Proceso de factura.</DialogTitle>
<DialogContent>
<Container>
<TextField
autoFocus
margin="dense"
id="vus"
name="vus"
label="Valor unitario de servicio."
fullWidth
variant="outlined"
onChange={handleChange}
value={vus}
/>
<TextField
margin="dense"
id="discount"
name="discount"
label="Descuento"
fullWidth
variant="outlined"
onChange={handleChange}
value={discount}
/>
<TextField
margin="dense"
id="paymentMeth"
name="paymentMeth"
label="Método de pago"
fullWidth
variant="outlined"
onChange={handleChange}
value={paymentMeth}
/>
<TextField
margin="dense"
id="payment"
name="payment"
label="Forma de pago"
fullWidth
variant="outlined"
onChange={handleChange}
value={payment}
/>
{requiresCCP ? (
<>
<Box className={classes.formInputs}>
<FormControl fullWidth>
<InputLabel id="select-vehicle">
Vehículo
</InputLabel>
<Select
labelId="select-vehicle"
id="vehicleSelect"
name="vehicleSelect"
value={vehicle}
label="Vehículo"
onChange={handleChange}
>
{allVehicles.map((vehicle, index) => {
return (
<MenuItem
value={vehicle._id}
key={index}
>
{vehicle.PlateNumber} -{" "}
{vehicle.VehicleName} Modelo{" "}
{vehicle.Model}
</MenuItem>
);
})}
</Select>
</FormControl>
</Box>
<Box className={classes.formInputs}>
<FormControl fullWidth>
<InputLabel id="select-contact">
Contacto
</InputLabel>
<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
>
value={contact}
onChange={handleChange}
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather}{" "}
{contact.LastNameMother}{" "}
{contact.FirstName} -{" "}
{contact.OfficialNumber}
</MenuItem>
);
})}
</Select>
</FormControl>
</Box>
</>
) : (
""
)}
</Container>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancelar</Button>
<Button variant="contained" type="submit">
Completar viaje
</Button>
</DialogActions>
</Box>
);
};```

Answer 1

您在sectect元素内部传递的子项不正确。只需移除其子项的值和onchange，因为您已经将其作为道具传递

<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
>
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather}{" "}
{contact.LastNameMother}{" "}
{contact.FirstName} -{" "}
{contact.OfficialNumber}
</MenuItem>
);
})}
</Select>

Answer 2

如果您正在处理日期并将其传递为{item.date}然后使用{item.date.toLocaleDateString((}或{item.data.toString((｝

Answer 3

{item.date.toLocaleDateString((}或{item.data.toString((}-这对我的有效

<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}

需添加到字符串((