ReactJS基于道具文本匹配设置选定选项

我试图从我的url获取查询参数，并使用这些值设置加载时所选的选项值。目前，我可以访问两个匹配的值，即选项文本和查询参数值

我最初的想法是在循环中添加一个变量，该变量由一个if语句设置，该语句检查循环值是否与查询props值匹配，但我收到了一条关于意外标记的错误消息。此设置可能有什么问题？有更好的方法设置此评估并在页面加载时将“选择”设置为正确的选项

以下是完整的错误消息（

{selected}

是发生错误的地方）：

---

例如，

this.props.categoryQuery

是

Blog

并且在8个

this.props.categoryName

数组值中，

Blog

匹配并且添加了一个“selected”字符串您不能像现在这样为元素编写prop:

相反，将

值

属性传递给

选择

元素，将

默认值

传递给

选项

元素：

const {
    category,
    categoryQuery
} = this.props;
const selectedCategory = category.find((val) => {
    return val.categoryName === categoryQuery;
})

return (
    <select
        name="category"
        className="form-control filter-category"
        value={selectedCategory.categoryHashId}
    >
        {category.map((cat) => {
            return (
                <option
                    key={cat.categoryHashId}
                    defaultValue={cat.categoryHashId}
                >
                    {cat.categoryName}
                </option>
            );
        })}
    </select>
);

const{
类别
分类查询
}=这是道具；
const selectedCategory=category.find（（val）=>{
返回val.categoryName==categoryQuery；
})
返回(
{category.map（（cat）=>{
返回(
{cat.categoryName}
);
})}
);

旁注：如果您有唯一的

类别名称

，则不应使用

类别名称

进行识别/比较/选择。当用户选择类别时，请使用该类别而不是名称。为了提高效率，您可能需要稍微检查一下数据结构

---

我编写这个示例是为了满足您的需要，但是如果您在

类别查询中使用
hashId
，您可以跳过
.find（）
步骤。
这是可行的，但是我看到了一个与此解决方案相关的警告
警告：使用“defaultValue”或“value”属性，而不是将“selected”设置为on。
。基于此警告是否有更好的选项？更新了警告代码，请告诉我是否有答案。
<select name="category" className="form-control filter-category">
    { this.props.category.map( (category) => { var selected; if(category.categoryName == this.props.categoryQuery){ selected = 'selected'; } return (
    <option value={category.categoryHashId} {selected}>{category.categoryName}</option> ) } ) }
</select>

const {
    category,
    categoryQuery
} = this.props;
const selectedCategory = category.find((val) => {
    return val.categoryName === categoryQuery;
})

return (
    <select
        name="category"
        className="form-control filter-category"
        value={selectedCategory.categoryHashId}
    >
        {category.map((cat) => {
            return (
                <option
                    key={cat.categoryHashId}
                    defaultValue={cat.categoryHashId}
                >
                    {cat.categoryName}
                </option>
            );
        })}
    </select>
);