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

Posted 2023-03-08

【中文标题】未捕获的错误：AllPostsComments.render()：必须返回有效的 ReactComponent

【英文标题】：Uncaught Error: AllPostsComments.render(): A valid ReactComponent must be returned

【发布时间】：2017-08-21 21:25:38

【问题描述】：

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

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

来自以下组件：

PhotoGrid.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;

最终导入到 app.js 中：

import React from 'react';
import  render  from 'react-dom';
import  Provider  from 'react-redux';
import  Router, Route, IndexRoute  from 'react-router'
import 'babel-polyfill';
import  ApolloProvider, graphql, gql  from 'react-apollo';
import client from './apolloClient';
 
/*
  Import Components
*/
import App from './components/App';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';

/* Import CSS */
import css from  './styles/style.styl';

/* Import our data store */
import store,  history  from './store';

/*
  Error Logging
*/
import Raven from 'raven-js';
import  sentry_url  from './data/config';
if(window) 
  Raven.config(sentry_url).install();


/*
  Rendering
  This is where we hook up the Store with our actual component and the router
*/
render(
  <ApolloProvider store=store client=client>
     /* Tell the Router to use our enhanced history */ 
    <Router history=history>
      <Route path="/" component=App>
        <IndexRoute component=PhotoGrid />
        <Route path="/view/:postId" component=Single></Route>
      </Route>
    </Router>
  </ApolloProvider>,
  document.getElementById('root')
);

我在这里俯瞰什么？

【参考方案1】：

看起来您的 PhotoGrid 组件有问题。还建议使用React.Component 而不是React.createClass，并且最好在渲染方法之外使用graphql 包装组件。总而言之，这就是你得到的：

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 了解更多信息。