javascript - 为什么.map()不返回任何内容？

我试图在API调用后从状态动态加载表单，这是在componentDidMount()中完成的。 API调用成功，完成后在setState()上调用languageList，但是.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。

我想念什么？

最佳答案

将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,
  })

})

关于javascript - 为什么.map()不返回任何内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57128739/