如何 map 從反應 state 到 select 框的字符串數組

Question

I read a json file in the first select box and set the value as state and i don't know how to read that value to another select box. 我得到的只是整個數組作為一個字符串。

這是我從第一個 select 框中將 state 設置為 object 的代碼：

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 盒子：

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

這是 select 框，我想在其中顯示來自 state object 數組的數據：

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

Answer 1

Object.entries()方法返回給定對象自己的可枚舉字符串鍵屬性 [key, value] 的數組

• MDN 文檔

這意味着.map function 中的每個item都是一個數組，例如[key, value] 。

我想你想做的是，

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

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

---

此外，在您的setState中，您正在訪問[e.target.id]但您的<option>標簽沒有設置id屬性。

---

編輯：

正如OP所指出的，

但在我的 select 盒子里，我仍然得到：2017-05-03,2018-02-01（作為一種選擇）

我認為這可能是因為第一個item.dates字段中的 item.dates （ <option key={i} value={item.dates}>{item.name}</option> ）。 item.dates是一個數組嗎？ 我建議您檢查您的 JSON。