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

Question

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

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

这真的很令人困惑，因为数据渲染得很好，似乎连接失败了。知道可能导致错误的原因吗？

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

我使用这篇中型文章来启动并运行所有内容：Medium Article

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

graphql/statements.js：

import gql from 'graphql-tag';

const STATEMENTS_QUERY = gql`
  query {
      statements(filter: {destination: 1991}) {
        data {
          id
          title
          body
        }
      }
    }
`;

export default STATEMENTS_QUERY;

Answer 1

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

例子：

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

检查example in useQuery docs。