警告：失败的道具类型：提供给“ForwardRef(Select)”的道具“children”无效，需要一个 ReactNode

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

您在选择元素内传递的子项不正确。只需从其子项中删除 value 和 onchange 即可，因为您已经将它们作为 props 传递

<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.date.toString()}

Answer 3

{item.date.toLocaleDateString()} 或 {item.date.toString()} - 这对我有用

<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.toString()}{" "}
            {contact.LastNameMother.toString()}{" "}
            {contact.FirstName.toString()} -{" "}
            {contact.OfficialNumber.toString()}
        </MenuItem>
    );
})}

只需添加 toString()