警告：在 <select> 上使用 `defaultValue` 或 `value` 属性，而不是在 <option> 上设置 `selected`

Question

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

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