React使用MUI Select时出现ForwardRef(Select)的children属性无效错误

问题原因 #

你代码中的「联系人选择」Select组件内部误写了两行属性代码，导致Select组件接收到的children包含了非React节点类型的内容，触发PropType校验报错：
原本属于<Select>标签属性的value={contact}、onChange={handleChange}被错误写在了<Select>和</Select>的中间区域，这部分不属于合法的Select子元素（Select的子元素只能是MenuItem、Option等节点）。

修复方案 #

1. 把第二个Select标签内部多余的value={contact}、onChange={handleChange}两行代码删掉即可，这两个属性已经在Select标签上声明过了，属于重复且位置错误的冗余代码
2. 可选优化：将三元表达式else分支返回的空字符串""改为null，更符合React条件渲染的规范，避免潜在的类型校验问题

修复后的对应代码段如下：

{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}
                >
                    {allContacts.map((contact, index) => {
                        return (
                            <MenuItem
                                value={contact._id}
                                key={index}
                            >
                                {contact.LastNameFather}{" "}
                                {contact.LastNameMother}{" "}
                                {contact.FirstName} -{" "}
                                {contact.OfficialNumber}
                            </MenuItem>
                        );
                    })}
                </Select>
            </FormControl>
        </Box>
    </>
) : null}

内容的提问来源于stack exchange，提问作者josue anguiano