TypeError: Невозможно прочитать свойство после refre sh или после манипуляции - PullRequest
Новая
       55

TypeError: Невозможно прочитать свойство после refre sh или после манипуляции

0 голосов
/ 17 февраля 2020

Я получаю следующую ошибку после refre sh, а иногда и при первоначальном запуске проекта:

TypeError: Невозможно прочитать «утверждения» свойства undefined

Это действительно сбивает с толку, потому что данные отображаются хорошо, просто кажется, что соединение не удается. Есть идеи, что может быть причиной ошибки?

Никаких дополнительных ошибок при удалении 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

graphql / операторов. js: 

import gql from 'graphql-tag';

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

export default STATEMENTS_QUERY;

1 Ответ

1 голос
/ 17 февраля 2020

Вы можете проверить, загружаются ли результаты, прежде чем пытаться их отобразить.

Пример: 

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

Проверьте пример в файле useQuery docs .

...