警告：使用 `defaultValue` 或 `value` 道具<select>而不是设置`selected`<option>

Question

我有这个 Select 组件（使用 material-ui/core 4.9.13）并且我的控制台中有这个警告..这是一个渲染组件，这就是我所做的{...otherProps} {...field}。 我读过我可以使用类似的选项来解决这个问题，但它对我不起作用。 有人可以帮助我吗？

  <Select className={props.selectClassName}
                onChange={handleSelectChange} // does setValue on this field
                onOpen={handleOnOpen} // does something graphic
                displayEmpty={true}
                variant="outlined"
                {...otherProps}
                {...field}
                value={field.value || ''}
        >
            {OPTIONS_ARR
                .map((obj: { label: string, value: string, country?: string }, index: number) =>
                <option
                    className={`${classes.optionStyle} c-pointer`}
                    key={index}
                    value={obj.value}
                    defaultValue={field.value}
                >
                    {obj.label}
                </option>)}
        </Select>

在这里完成警告

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

Answer 1

试试这个：

 <Select className={props.selectClassName}
            onChange={handleSelectChange} // does setValue on this field
            onOpen={handleOnOpen} // does something graphic
            displayEmpty={true}
            variant="outlined"
            {...otherProps}
            {...field}
            value={field.value || ''}
    >
        {OPTIONS_ARR
            .map((obj: { label: string, value: string, country?: string }, index: number) =>
            <option
                className={`${classes.optionStyle} c-pointer`}
                key={index}
                value={obj.value}
            >
                {obj.label}
            </option>)}
    </Select>