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

Question

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

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

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

The Object.entries() method returns an array of a given object's own enumerable string-keyed property [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>

如果只需要对象值而不需要键，可以使用^{}或逆^{}

---

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

---

编辑：

正如OP所指出的

But in my select box I still get: 2017-05-03,2018-02-01 (as one option)

我认为这可能是因为第一个select字段（<option key={i} value={item.dates}>{item.name}</option>）中有item.dates。item.dates是数组吗？我建议您检查JSON