Javascript 如何在React中映射对象数据和渲染？

我试图呈现从graphql查询返回的数据，但得到错误

TypeError:无法读取未定义的属性“map”

如果我将数据记录到控制台，我可以看到它已成功返回：

{listTalks: Array(100)}
    listTalks: Array(100)
        [0...99]
            0: {ID: "xxxxxxxy", speakerName: "Bob", name: "Talk1", description: "text"}
            1: {ID: "xxxxxxyy", speakerName: "Joe", name: "Talk2", description: "text"}
            2: {ID: "xxxxxyyy", speakerName: "Carry", name: "Talk3", description: "text"}
            3: {ID: "xxxxyyyy", speakerName: "Kyle", name: "Talk4", description: "text"}
            4: {ID: "xxxyyyyy", speakerName: "Mark", name: "Talk5", description: "text"}

但是，当我映射数据以尝试渲染它时，会出现错误

完整代码如下：

class App extends React.Component {

  // define some state to hold the data returned from the API
  state = {
    talks: []
  }

  // execute the query in componentDidMount
  async componentDidMount() {
    try {
      const talkData = await client.query({query: gql(listTalks)})
      console.log('talkData:', talkData)
      this.setState({
        talks: talkData.data.listTalks.items
      })
    } catch (err) {
      console.log('error fetching talks...', err)
    }
  }


  render() {
    return (
      <>
      <div>
        {
           this.state.talks.map((talk, index) => (
            <div key={index}>
              <h3>{talk.speakerName}</h3>
              <h5>{talk.name}</h5>
              <p>{talk.description}</p>
            </div>
          ))

        }
        </div>
      </>
    )
  }
}

export default App

类应用程序扩展了React.Component{
//定义一些状态来保存从API返回的数据
状态={
会谈：[]
}
//在componentDidMount中执行查询
异步组件didmount（）{
试一试{
const-talkData=await-client.query（{query:gql（listTalks）}）
console.log（'talkData:'，talkData）
这是我的国家({
会谈：talkData.data.listTalks.items
})
}捕捉（错误）{
console.log（'error fetching talks…'，err）
}
}
render（）{
返回(
{
this.state.talks.map（（talk，index）=>(
{talk.speakerName}
{talk.name}
{talk.description}

))
}
)
}
}
导出默认应用程序

我认为

talkData.data.listTalks.items

等于undefined，因此它抛出undefined.map不是一个函数

this.setState({
    talks: talkData.data.listTalks
  })

---

可能是由于.items属性的缘故。

您的数据是异步的，因此需要检查数据是否已到达，。如果（！this.states.talks）返回null，只需放置

作为渲染的第一行，第二行渲染（当您实际拥有数据时）state.talks将存在。您还可以将null替换为
加载..
等。。