Нарушение инварианта: Query(...): От рендеринга ничего не возвращено. Обычно это означает, что оператор return отсутствует

У меня есть имя компонента — код Graph.js, указанный ниже:

import React, { Component } from "react";
import { View, Text } from "react-native";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import Launches from "./Launches.js";
const client = new ApolloClient({
  uri: "http://127.0.0.1:4000/graphql"
});

export default class Graph extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <ApolloProvider client = {client}>
        <View>
          <Text>Hello Apillo</Text>
        </View>
        <Launches />
      </ApolloProvider>
    );
  }
}

И другое имя файла — код Launcher.js, указанный ниже:

import React, { Component } from "react";
import { View, Text } from "react-native";
import gql from "graphql-tag";
import { Query } from "react-apollo";

const LAUNCHES_QUERY = gql`
  query LaunchesQuery {
    launches {
      flight_number
      mission_name
    }
  }
`;
export default class Launches extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <Query query = {LAUNCHES_QUERY}>
          {({ loading, error, data }) => {
            if (loading) return <Text>Loading...</Text>;
            if (error) return console.info(error);
            let length = data.length;
            console.info(data);
            return <Text>Launches</Text>;
          }}
        </Query>
      </View>
    );
  }
}

Я установил graphql setup на своем локальном хосте, и он хорошо работал в http://localhost:4000/graphql.

Когда я вызываю URI из реагирующего приложения, возникают ошибки.

Ошибка1: Сетевая ошибка: сетевой запрос не выполнен

Ошибка2: Нарушение инварианта: Query(...): От рендеринга ничего не возвращено. Обычно это означает, что оператор return отсутствует. Или, чтобы ничего не отображать, верните null.

Я также пытался изменить URI http://localhost и передать http://127.0.0.1

Заранее спасибо

Попробуйте с ip машины

Guruparan Giritharan 28.03.2019 07:30

@GuruparanGiritharan хорошо, я проверю

Subhash Patel 28.03.2019 07:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
6
2
962
2

Ответы 2

Компонент Query должен быть за пределами , это будет:

...
  render() {
    return (
      <Query query = {LAUNCHES_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <Text>Loading...</Text>;
          if (error) return console.info(error);
          let length = data.length;
          console.info(data);
          return <Text>Launches</Text>;
        }}
      </Query>
    );
  }
  ...

Ответ Дюверни, возможно, был полезен для других, но у меня была эта проблема и в веб-приложении React, и лекарство заключалось в том, чтобы специально возвращать null, если данных нет. Если вы вернете пустую строку, произойдет сбой. Обертывание возвращаемого значения в JSX также решает проблему. Надеюсь, это сэкономит кому-то еще несколько минут.

Привет, Бен, не могли бы вы привести пример? Я схожу с ума от той же ошибки, и мой синтаксис возврата выглядит правильно... Заранее спасибо!

joeCarpenter 10.11.2019 04:02

Я думаю, мне нужно увидеть ваш код, чтобы показать что-нибудь полезное. Что именно вы возвращаете из функции рендеринга? Ничего не вернуть (undefined), но можно вернуть null.

Ben Steward 10.11.2019 04:46

@joeCarpenter проверьте эту функцию рендеринга и то, как обрабатываются данные, и кодируются все возможные сценарии возврата: github.com/tehpsalmist/play-the-mind/blob/…

Ben Steward 10.11.2019 04:47

Спасибо, Бен, это ссылка на вопрос, который я разместил: stackoverflow.com/questions/58785332/…

joeCarpenter 10.11.2019 15:39

Другие вопросы по теме