首页 > 解决方案 > 如何在反应中使用选择来制作动态状态

问题描述

我有 categoryData 数组(每个项目动态选择)和兴趣数组,我需要根据状态动态的 categoriesData 数量来显示。

这是我的状态:

{
  "categoriesData": [
    "Sports",
    "Pets"
  ],
  "interests": [
    "Travel & Tourism",
    "Technology & Science",
    "Sports",
    "Restaurants",
    "Photography",
    "Pets",
    "Music",
    "Movies and TV",
    "How-to & Style",
  ]
}

render() {
    return (
        <div className="row">
        <span>Categorias:</span>
            {this.state.categoriesData.map((item,index) => { 
                return (<select value= {item} onChange={(event) => this.categoriesData[????]}>
                    <option value= "" />
                    {this.state.interests.map((_item,i) =>
                        <option key={i}  value={_item}>{_item} 
                    </option>
                    )}
                </select>) 
            })}
        </div>
    );
}

我正确显示了两个带有所选值的输入选择和选项货物..

问题是 select 的值没有更新,因为我不知道要修改的状态是什么。

标签: javascriptreactjsdynamicreduxstate

解决方案


为什么不将兴趣保存为字典列表,键值对,其中值可以被选中|未选中。

`"interests": 
     [
        {"Travel & Tourism": false},
        {"Technology & Science" : true}, 
        {"Restaurants": false}
     ]`

推荐阅读