경고 : propType에 실패했습니다 : 필수`prop`` 데이터가`사진`에 지정되지 않았습니다. `withApollo (사진) '의 렌더링 방법을 확인하십시오.

Question

위의 경고는 구성 요소 페이지로드시 생성됩니다 (첨부 된 이미지 참조).

구성 요소의 propType은 구성 요소 선언 다음에 명확하게 지정됩니다.

누구든지이 문제에 관해 밝힐 수 있습니까?

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">&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;

을 다음과 같이

내 코드입니다 구성 요소 Photo는 속성 이름을 isRequired 그 data을 필요로하기 때문에

Answer 1

이 오류입니다. 이 코드에서 온다 : 당신은 지정된 모양으로 Photo aproperty data에 전송해야

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

.

withApollo : data은 Photo에 무엇을 삽입합니까? 그렇지 않은 경우 내 보낸 구성 요소가 어떻게 호출되는지 확인하십시오 PhotoWithApollo.

<PhotoWithApollo data={{loading: true, error:'my error', updatePosts:{}}}/>