ES6 地图在 Gatsby 中返回空值

Question

我有一个 JSON 文件，它向 Gatsby 提供值，Gatsby 通过 gatsby-source-filesystem 读取该文件。我将 GraphQL 与 gatsby-transformer-json 一起使用，它为我提供如下查询以访问代码

中 JSON 的所有值

    {
      allSrcJson {
       totalCount
       edges {
         node {
          total
          results {
            account
          }
       }
     }
   }
 }

现在在我的代码中，当我尝试做一个 .map 时，它第一次工作，而下一次它说 Cannot read property 'account' of undefined 而当我写 node.results[0].account 时给我结果。

{data.allSrcJson.edges.map(({ node }) => (
   <div key={node.total}>
     <p>{node.total}</p>
     {node.results.map(({ result }) => (
       <p>{result.account}</p>
     ))};
   </div>
))}

Answer 1

如果不查看数据很难诊断，但听起来您的 results 数组中至少有一个成员没有 result 属性 .如果您尝试取出第二个对象解构，并注销该对象，您将看到哪个失败了。（或者你可能打算像这样进行第二个对象解构node.results.map({ account })）

{node.results.map(obj => {
    console.log(obj)
    if (obj.result) {
        return <p>{obj.result.account}</p>
    } else return null
})

ES6 地图在 Gatsby 中返回空值

ES6 Map Returning Null in Gatsby

reactjs

gatsby