Reactjs 尝试在react redux应用程序中使用数据库值创建select元素

我从数据库表返回一组文本值，然后尝试从中创建一个select元素。我收到以下错误消息：

• 警告：列表中的每个孩子都应该有一个唯一的“键”道具

我使用名为categories的数组中的值创建了一个本地存储：

let categoriesFromApi = fetchedCategories.map(category => {
    return { key: category, value: category, display: category }
})
this.setState({ categories: [{ key: 0, value: '', display: '(Select A Category)' }].concat(categoriesFromApi) });

然后我构建select元素：

<select value="Select a Category"
    onChange={(e) => this.setState({ selectedCategory: e.target.value, validationError: e.target.value === "" ? "You must select a Category" : "" })}>
    {this.state.categories.map((category) => <option value={category.category}>{category.category}</option>)}
</select>

this.setState（{selectedCategory:e.target.value，validationError:e.target.value===“”？“您必须选择一个类别：“}”）>
{this.state.categories.map（（category）=>{category.category}}

我还需要做什么？

试试看

<select
    value="Select a Category"
    onChange={e =>
        this.setState({
            selectedCategory: e.target.value,
            validationError:
                e.target.value === "" ? "You must select a Category" : ""
        })
    }
>
    {this.state.categories.map((category, idx) => (
        <option key={`${category.id}-${idx}`} value={category.category}>
            {category.category}
        </option>
    ))}
</select>;

这是我的国家({
所选类别：e.target.value，
验证错误：
e、 target.value==“”？“您必须选择一个类别：”
})
}
>
{this.state.categories.map（（category，idx）=>(
{category.category}
))}
;

未从类别中选择正确的项目：

简化了任务：

this.setState({ categories: fetchedCategories });

然后：

this.setState（{selectedCategory:e.target.value，validationError:e.target.value===“”？“您必须选择一个类别：“}”）>
{this.state.categories.map（（category）=>{category.cat_item}}

键有助于识别哪些项目已更改（添加/删除/重新订购）。要为数组中的每个元素提供唯一标识，需要一个键。在本例中，您可以执行以下操作：{this.state.categories.map（（category，index）=>{category.category}}

<select value="Select a Category"
    onChange={(e) => this.setState({ selectedCategory: e.target.value, validationError: e.target.value === "" ? "You must select a Category" : "" })}>
    {this.state.categories.map((category) => <option value={category.cat_item}>{category.cat_item}</option>)}
</select>