如何在反应中使用选择来制作动态状态

Question

我有 categoriesData 数组（每个项目动态选择）和兴趣数组，我需要根据状态动态显示 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 的值没有更新，因为我不知道要修改的状态是什么。

Answer 1

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

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