Javascript TypeError:刷新或操作后无法读取属性

刷新后，有时在项目初始运行时，我会出现以下错误：

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

这确实令人困惑，因为数据呈现良好，只是连接似乎失败了。你知道是什么导致了这个错误吗

删除statements.map时没有其他错误

我用这篇媒体文章让一切都开始运行：

index.js：

import React, { useState, useReducer } from 'react'
import { useQuery } from '@apollo/react-hooks'

// Custom layout
import Layout from "../components/layout"

import '../sass/styles.scss'

// Data Query
import STATEMENTS_QUERY from '../graphql/statements'

function StatementCall(context) {

  const { loading, error, data } = useQuery(STATEMENTS_QUERY, {});

  return (
    <Layout>
      <div className="container">
        <div className="row spaces">
          <div className="col-md-12">
            <p>Testing</p>
            {data.statements.data.map((statement, index) => (
              <div>
                <p>{statement.id}</p>
                <p>{statement.title}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  )
}

export default StatementCall

---

在尝试渲染结果之前，可以检查结果是否正在加载

例如：

function StatementCall(context) {

  const { loading, error, data } = useQuery(STATEMENTS_QUERY, {});

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    // Handle error?
    return <p>{error}</p>;
  }

  return (
    <Layout>
      <div className="container">
        <div className="row spaces">
          <div className="col-md-12">
            <p>Testing</p>
            {data.statements.data.map((statement, index) => (
              <div>
                <p>{statement.id}</p>
                <p>{statement.title}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  )
}

---

检查。

这可能是因为api没有返回数据。您可以在尝试呈现结果之前检查结果是否正在加载，例如，如果加载返回加载…

@segFault很有趣，我把它添加到函数中，它现在可以工作了，当我刷新它时它不会中断。我认为这种方法的一个问题是，它在加载时会显示什么？也许在最后显示一个| | Foo结构以防修复它。另外，可能不是检查加载，可能更简单的方法是{data.statements&&data.statements.data.map…，这样它就不会在测试标记之后显示任何数据。

function StatementCall(context) {

  const { loading, error, data } = useQuery(STATEMENTS_QUERY, {});

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    // Handle error?
    return <p>{error}</p>;
  }

  return (
    <Layout>
      <div className="container">
        <div className="row spaces">
          <div className="col-md-12">
            <p>Testing</p>
            {data.statements.data.map((statement, index) => (
              <div>
                <p>{statement.id}</p>
                <p>{statement.title}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  )
}