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

Question

我正在尝试呈现从graphql查询返回的数据，但是我得到了错误TypeError: Cannot read property 'map' of undefined

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

{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

Answer 1

我认为talkData.data.listTalks.items等同于未定义，因此它抛出了undefined.map不是一个函数。

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

也许这是因为.items属性造成的。