警告：在<selected&gt上使用`defaultValue`或`value`道具，而不是在<option&gt上设置`selected`。在<select&gt上使用`defaultValue`或`value`道具，而不是在<option&gt上设置`selected`。

Question

我有一个Select组件(使用material-uicore 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>