Javascript ReactJS<；选择>；具有不区分大小写的值

通常，我会使用

HTML标记中的

选择的
选项构建以下ReactJS组件：

import React, { Component } from "react";

class Caller extends Component {
    render = () => {
        return <Test filter={"item2"} />;
    };
}

class Test extends Component {
    render = () => {
        let data = [
            {
                key: "Item1",
                value: "Item1"
            },
            {
                key: "Item2",
                value: "Item2"
            },
            {
                key: "Item3",
                value: "Item3"
            }
        ];

        let options = [];

        data.map(item => {

            let selected = this.props.filter.toLowerCase() === item.key.toLowerCase();

            options.push(
                <option selected={selected} value={item.value}>{item.key}</option>
                );
        });

        return (
            <select>
                {options}
            </select>
        );
    };
}

export default Caller;

import React，{Component}来自“React”；
类调用程序扩展组件{
渲染=（）=>{
返回；
};
}
类测试扩展了组件{
渲染=（）=>{
让数据=[
{
关键：“项目1”，
值：“Item1”
},
{
关键：“项目2”，
值：“项目2”
},
{
关键：“项目3”，
值：“项目3”
}
];
让期权=[]；
data.map（项=>{
让selected=this.props.filter.toLowerCase（）==item.key.toLowerCase（）；
选项。推(
{item.key}
);
});
返回(
{options}
);
};
}
导出默认调用方；

ReactJS对此提出投诉，并发出以下警告：

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

警告：使用“defaultValue”或“value”道具，而不是设置“selected”。

我知道如何在ReactJs上使用
中的
值
属性，但这会使我的组件区分大小写，这是我不想做的

如何正确地使用不区分大小写的数据遵循ReactJS
值
规则？
因为您同时拥有
键和
值
，并且显示
键
，使用
值
作为
道具。过滤器
，您可以严格控制字母大小写：


const数据=[
{
关键：“项目1”，
值：“Item1”
},
{
关键：“项目2”，
值：“项目2”
},
{
关键：“项目3”，
值：“项目3”
}
];
类测试扩展了React.Component{
render（）{
返回(
{data.map（项=>(
{item.key}
))}
);
};
}
ReactDOM.render(
,
演示
);