因此,上面提到的警告是在组件页面加载时生成的(参见附图)。
在组件声明后明确指定组件的propTypes。
任何人都可以解释这个问题吗?
我的代码如下:
Photo.js
ias_fraud_df = ias_fraud_df[ias_fraud_df['Placement Name'].str.contains("»")]

PhotoGrid.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;
&#13;
答案 0 :(得分:1)
此错误是因为组件endAt()
需要Photo
的属性名称data
。这来自代码:
isRequired
您必须使用指定的形状发送至Photo.propTypes = {
data: React.PropTypes.shape({
loading: React.PropTypes.bool.isRequired,
error: React.PropTypes.bool.isRequired,
updatePosts: React.PropTypes.object,
}).isRequired
}
aproperty Photo
。
验证data
:withApollo
中插入data
的内容是什么?如果没有,请验证如何调用导出的组件Photo
。应该有类似的东西:
PhotoWithApollo