如何将字符串数组从反应状态映射到选择框

Question

我在第一个选择框中读取了一个 json 文件并将值设置为状态，但我不知道如何将该值读取到另一个选择框。我得到的只是整个数组作为一个字符串。

这是我从第一个选择框中将状态设置为对象的代码：

constructor(props) {
    super(props);
    this.state = {
        selectedCourse: {}
        
    };
    this.onSelectCourse = this.onSelectCourse.bind(this);
}
onSelectCourse(e) {
    console.log(e.target);
    this.setState(
        {
            selectedCourse: {
                ...this.state.selectedCourse,
                [e.target.id]: [e.target.value]
            }
        },
        () => {
            console.log(this.state);
        }
    );
}

render() {
    const { selectedCourse } = this.state;

这是第一个选择框：

<select onChange={this.onSelectCourse}>{CoursesList.courses.map((item, i) =><option key={i} value={item.dates}>{item.name}</option>)}</select>

这是我要显示状态对象数组中的数据的选择框：

<select>{Object.entries(this.state.selectedCourse).map((item) =><option key={item}>{item}</option>)}</select>

Answer 1

Object.entries() 方法返回给定对象自己的可枚举字符串键属性 [key, value] 的数组

• MDN docs

表示.map 函数中的每个item 都是一个数组，例如[key, value]。

我认为你想做的是，

<select>
{Object.entries(this.state.selectedCourse)
  .map(
   ([key, value]) => (<option key={key} value={value}>{value}</option>)
  )
}
</select>

如果您只想要对象值而不是键，您可以使用Object.values() 或反向Object.keys()。

---

另外，在您的setState 中，您正在访问[e.target.id]，但您的<option> 标签没有id 属性集。

---

编辑：

正如 OP 所指出的，

但在我的选择框中我仍然得到：2017-05-03,2018-02-01（作为一个选项）

我认为这可能是因为第一个选择字段中的item.dates (<option key={i} value={item.dates}>{item.name}</option>)。 item.dates 是一个数组吗？我建议你检查你的 JSON。