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

Question

如果变量为真，但当组件渲染显示警告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，因为您已经将它们作为道具传递了

<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>