警告:propType 失败:未在“照片”中指定必需的道具“数据”。查看`withApollo(Photo)`的render方法
Warning: Failed propType: Required prop `data` was not specified in `Photo`. Check the render method of `withApollo(Photo)`
所以,上面提到的警告是在组件页面加载时生成的(见附图)。
组件的 propTypes 在组件声明后明确指定。
任何人都可以阐明这个问题吗?
我的代码如下:
Photo.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">♥ {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;
此错误是因为组件 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:{}}}/>