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

我在第一个选择框中读取了一个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>

这是第一个选择框：

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>

{CoursesList.courses.map（（item，i）=>{item.name}

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

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

{Object.entries（this.state.selectedCourse.map（（item）=>{item}）}

Object.entries（）

方法返回给定对象自身的可枚举字符串键控属性[key，value]的数组

这意味着

.map

函数中的每个

项都是一个数组，如
[key，value]

我想你要做的是

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


{Object.entries（this.state.selectedCourse）
.地图(
（[key，value]）=>（{value}）
)
}

如果只需要对象值而不需要关键点，可以使用或进行反转


另外，在您的
设置状态中
您正在访问
[e.target.id]
，但是您的
标记没有
id
属性集


编辑：

正如OP所指出的

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

我想这可能是因为first select字段（
{item.name}
）中的
item.dates
）。
项.dates
是数组吗？我建议您检查JSON。
我添加了一个id属性，正如您所提到的，并且还更改了代码。但在我的选择框中，我仍然得到：2017-05-032018-02-01（作为一个选项），而不是按顺序列出，如：选项1->2017-05-03选项2->2018-02-01。我认为罪魁祸首是
项。日期
，可能是一个数组。我已经更新了我的答案，但如果仍然不起作用，请通过包含您正在阅读的JSON文件来更新您的问题。