javascript - 如何将字符串数组从 react 状态映射到选择框

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

The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value]

• MDN docs

表示每个item在.map函数是一个数组，例如 [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 所指出的，

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

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