未捕获错误：AllPostsComments.render（）：必须返回有效的ReactComponent

Question

因此，我在从GraphCool后端尝试数据时收到以下错误消息：

db=> ALTER USER readonlyuser SET search_path=customschema, public;
ALTER ROLE

来自以下组件：

PhotoGrid.js

Uncaught Error: AllPostsComments.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (http://localhost:7770/static/bundle.js:3026:16)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:7770/static/bundle.js:9619:157)
    at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (http://localhost:7770/static/bundle.js:3344:22)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:9566:37)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:9550:11)
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:9479:13)
    at ReactCompositeComponentWrapper.wrapper [as updateComponent] (http://localhost:7770/static/bundle.js:3344:22)
    at ReactCompositeComponentWrapper.receiveComponent (http://localhost:7770/static/bundle.js:9411:11)
    at Object.receiveComponent (http://localhost:7770/static/bundle.js:7586:23)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:9568:24)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:9550:11)
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:9479:13)
    at ReactCompositeComponentWrapper.wrapper [as updateComponent] (http://localhost:7770/static/bundle.js:3344:22)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:9427:13)
    at Object.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:7601:23)
    at runBatchedUpdates (http://localhost:7770/static/bundle.js:8183:22)
    at ReactReconcileTransaction.perform (http://localhost:7770/static/bundle.js:8643:21)
    at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:8643:21)
    at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:8140:39)
    at Object.flushBatchedUpdates (http://localhost:7770/static/bundle.js:8201:20)
    at Object.wrapper [as flushBatchedUpdates] (http://localhost:7770/static/bundle.js:3344:22)
    at ReactDefaultBatchingStrategyTransaction.closeAll (http://localhost:7770/static/bundle.js:8709:26)
    at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:7770/static/bundle.js:8656:17)
    at Object.batchedUpdates (http://localhost:7770/static/bundle.js:12680:20)
    at Object.enqueueUpdate (http://localhost:7770/static/bundle.js:8230:23)
    at enqueueUpdate (http://localhost:7770/static/bundle.js:7815:17)
    at Object.enqueueSetState (http://localhost:7770/static/bundle.js:7981:6)
    at GraphQL.ReactComponent.setState (http://localhost:7770/static/bundle.js:17838:17)
    at GraphQL.forceRenderChildren (http://localhost:7770/static/bundle.js:37273:27)
    at Object.next (http://localhost:7770/static/bundle.js:37250:28)
    at http://localhost:7770/static/bundle.js:40174:30
    at Array.forEach (native)
    at Object.next (http://localhost:7770/static/bundle.js:40172:34)
    at http://localhost:7770/static/bundle.js:40625:47
    at http://localhost:7770/static/bundle.js:41065:26
    at Array.forEach (native)
    at http://localhost:7770/static/bundle.js:41062:28
    at Array.forEach (native)
    at QueryManager.broadcastQueries (http://localhost:7770/static/bundle.js:41059:43)
    at QueryManager.broadcastNewStore (http://localhost:7770/static/bundle.js:40458:15)
    at http://localhost:7770/static/bundle.js:41127:45
    at http://localhost:7770/static/bundle.js:75299:17
    at Object.dispatch (http://localhost:7770/static/bundle.js:23161:19)
    at http://localhost:7770/static/bundle.js:40988:30

最终导入app.js：

import _ from 'lodash';
import React from 'react';
import Photo from './Photo';
import {
  gql,
  graphql,
} from 'react-apollo';

const PhotoGrid = React.createClass({

  handleSubmit(e) {
    e.preventDefault();
    this.props.addItem(this.refs.item.value);
  },

  render() {
    // const posts = this.props.posts;
    const AllPostsComments = ({ data: {loading, error, allPostses }}) => {
      if (loading) {
        return <p>Loading ...</p>;
      }
      if (error) {
        return <p>{error.message}</p>;
      }
      return 
        <div className="photo-grid">
          { allPostses.map( posts => <Photo key={posts.id} i={posts.id} post={posts} /> ) }
        </div>;
    };

    const allPostsCommentsQuery = gql`
      query allPostsCommentsQuery {
        allPostses {
          id
          displaysrc
          caption
          comments {
            id
            posts {
              id
            }
            text
            user
          }
        }
      }
    `;

    const ChannelsListWithData = graphql(allPostsCommentsQuery)(AllPostsComments);
    
    return (
      <ChannelsListWithData />
    );
  }
});

export default PhotoGrid;

我在这里俯瞰什么？

Answer 1

您的PhotoGrid组件看起来不正确。它还建议使用React.Component而不是React.createClass，并且首选将组件与graphql包装在render方法之外。这就是你得到的：

import _ from 'lodash';
import React from 'react';
import Photo from './Photo';
import {
  gql,
  graphql,
} from 'react-apollo';

class PhotoGrid extends React.Component {

  handleSubmit(e) {
    e.preventDefault();
    this.props.addItem(this.refs.item.value);
  },

  render() {
    if (this.props.data.loading) {
      return <p>Loading ...</p>;
    }
    if (this.props.data.error) {
      return <p>{this.props.data.error.message}</p>;
    }
    return (
      <div className="photo-grid">
        { this.props.data.allPostses.map( posts => <Photo key={posts.id} i={posts.id} post={posts} /> ) }
      </div>;
    )
  };
};


const allPostsCommentsQuery = gql`
  query allPostsCommentsQuery {
    allPostses {
      id
      displaysrc
      caption
      comments {
        id
        posts {
          id
        }
        text
        user
      }
    }
  }
`;

const ChannelsListWithData = graphql(allPostsCommentsQuery)(AllPostsComments);

export default ChannelsListWithData;

您可以将代码与this RN app example进行比较，或查看RN track in Learn Apollo了解详情。