为什么.map（）不返回任何内容？

Question

我试图在API调用后从状态动态加载表单，这是在componentDidMount() 。 API调用成功，完成后在languageList上调用setState() ，但是.map()调用不返回任何选项。 它什么也不返回。

  componentDidMount() {
    let languages = []
    base('Languages').select({
      view: 'Grid view'
    }).firstPage(function(err, records) {
      if (err) {console.error(err); return; }
      records.forEach(function(record) {
        let languageObject = {}
        languageObject['id'] = record.id
        languageObject['name'] = record.get('Language Name')
        languages.push(languageObject)
      })
    })
    this.setState({
      languageList: languages,
    })
  }

  render() {
    return (
      ...
      <select>
        {this.state.languageList.map((language, key) => (
          <option key={key} value={language.id}>{language.name}</option>
        ))}
      </select>
    )
  }

我已经验证state.languageList是一个对象数组，每个对象都有一个id和name 。

我想念什么？

Answer 1

当数据可用时，将setState移到API回调中。

您正在接收数据之前调用它，因为它是异步的

base('Languages').select({
  view: 'Grid view'
}).firstPage((err, records) => {// arrow function to not block `this`
  if (err) {
    console.error(err);
    return;
  }
  records.forEach(function(record) {
    let languageObject = {}
    languageObject['id'] = record.id
    languageObject['name'] = record.get('Language Name')
    languages.push(languageObject)
  })
  // languages array has been updated here
  this.setState({
    languageList: languages,
  })

})

Answer 2

尝试这个

<select>
  {
   this.state.languageList && this.state.languageList.map((language, key) => (
   <option key={key} value={language.id}>{language.name}</option>
   ))
  }
</select>