0

因此，在组件页面加载时会生成上述警告（参见附图）。

组件的 propTypes 在组件声明之后明确指定。

任何人都可以阐明这个问题吗？

我的代码如下：

照片.js

import React from 'react';
import Comments from './Comments';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { Link } from 'react-router';
import {
  gql,
  graphql,
  withApollo
} from 'react-apollo';
import ApolloClient from 'apollo-client';

class Photo extends React.Component {

incrementQuery (currentID) {

    console.log("like of id= " + currentID + " has been incremented by 1");

    this.props.client.query({
      query: queryB,
      variables: {
        id: currentID,
      },
    });
  }

  render() {
    const { post, i } = this.props;

    return (
      <figure key={i} className="grid-figure">
        <div className='grid-photo-wrap'>
          <Link to={`/view/${post.id}`}>
            <img className='grid-photo' src={post.displaysrc} alt={post.caption} />
          </Link>
          <CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
            <span key={post.likes} className="likes-heart">{post.likes}</span>
          </CSSTransitionGroup>
        </div>
        <figcaption>
          <p>{post.caption}</p>
          <div className="control-buttons">
            <button onClick={this.incrementQuery.bind(null,i)} className="likes">&hearts; {post.likes}</button>
            <Link to={`/view/${post.id}`} className="button">
              <span className="comment-count">
                <span className="speech-bubble"></span> {(post.comments ? Object.keys(post.comments).length : 0)}
              </span>
            </Link>
          </div>
        </figcaption>
      </figure>
    )
  }
};

Photo.propTypes = {
  client: React.PropTypes.instanceOf(ApolloClient).isRequired,
  query: React.PropTypes.object,
  variables: React.PropTypes.object,
  data: React.PropTypes.shape({
    loading: React.PropTypes.bool.isRequired,
    error: React.PropTypes.bool.isRequired,
    updatePosts: React.PropTypes.object,
  }).isRequired,
}

const queryB = gql`
  mutation updatePosts($id: ID!) {
    updatePosts (id: $id, likes: 1) {
      id
      likes
    }
  }  
  `;

const PhotoWithApollo = withApollo(Photo);

export default PhotoWithApollo;

PhotoGrid.js

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

const PhotoGrid = (props) => ({

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

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

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

const PhotoGridWithData = graphql(allPostsCommentsQuery)(PhotoGrid);

export default PhotoGridWithData;

在此处输入图像描述

4

1 回答 1

1

此错误是因为组件Photo需要一个属性名称data，即isRequired. 这来自代码：

Photo.propTypes = {
  data: React.PropTypes.shape({
    loading: React.PropTypes.bool.isRequired,
    error: React.PropTypes.bool.isRequired,
    updatePosts: React.PropTypes.object,
  }).isRequired
}

您必须发送到具有指定形状的Photo属性。data

验证什么withApollo：它是否data插入Photo？如果不是，请验证如何调用导出的组件PhotoWithApollo。应该有类似的东西：

<PhotoWithApollo data={{loading: true, error:'my error', updatePosts:{}}}/>
于 2017-03-31T14:48:25.677 回答