2016-11-15 3 views
0

잘 모르겠습니다.이 eslint 오류가 저에게 무엇을 요구하는지 이해하고 있습니다. apollo 클라이언트 데모 코드를 사용하고 있는데 "데이터"를 좋아하지 않는 것 같습니다. function PostList({ data: { loading, posts } }) {아폴로 반응 앱에서 "데이터가 소품 유효성 검사에 누락되었습니다"라는 오류가 발생했습니다.

에어 비앤비 eslint 규칙을 지키기 위해 다른 작업을 수행해야합니까, 아니면 무시해야합니까?

import React from 'react'; 
import { Text, View } from 'react-native'; 
import { graphql } from 'react-apollo'; 
import gql from 'graphql-tag'; 

const styles = { 
    outer: { paddingTop: 22 }, 
    wrapper: { height: 45, flex: 1, flexDirection: 'row' }, 
    header: { fontSize: 20 }, 
    subtextWrapper: { flex: 1, flexDirection: 'row' }, 
    votes: { color: '#999' }, 
} 

// The data prop, which is provided by the wrapper below contains, 
// a `loading` key while the query is in flight and posts when ready 
function PostList({ data: { loading, posts } }) { 
    if (loading) { 
    return <Text style={styles.outer}>Loading</Text>; 
    } else { 
    return (
     <View style={styles.outer}> 
     {posts.sort((x, y) => y.votes - x.votes).map(post => (
      <View key={post.id} style={styles.wrapper}> 
      <View> 
       <Text style={styles.header}>{post.title}</Text> 
       <View style={styles.subtextWrapper}> 
       <Text> 
       by {post.author.firstName} {' '} 
       {post.author.lastName} {' '} 
       </Text> 
       <Text style={styles.votes}>{post.votes} votes</Text> 
       </View> 
      </View> 
      </View> 
     ))} 
     </View> 
    ); 
    } 
} 

// The `graphql` wrapper executes a GraphQL query and makes the results 
// available on the `data` prop of the wrapped component (PostList here) 
export default graphql(gql` 
    query allPosts { 
    posts { 
     id 
     title 
     votes 
     author { 
     id 
     firstName 
     lastName 
     } 
    } 
    } 
`)(PostList); 

답변

0

당신은 당신의 파일에 proptypes을 추가해야합니다 :

PostList.propTypes = { 
    data: React.PropTypes.object, 
}; 

이 PostList 기능 아래에이를 추가합니다. PropType은 React 앱의 구성 요소에 전달 된 데이터 유형의 유효성을 검사하는 방법입니다.

AirBnB linter는 최선의 방법으로 이것을 보장합니다.

+0

이제는 또 다른 lint 오류가 있습니다 - 이것은 소품 유형 객체가 금지되어 있다고 말합니다. – MonkeyBonkey

+0

당신은'React.PropTypes.any'를 사용할 수 있으며 유효성 검사를 통과 할 것입니다. 그러나, 당신이 지나가고있는 것은 PropType으로 선언 한 것입니다. – Toby

+0

또한 금지 된 소품 유형에 대한 자세한 내용은이 [link] (https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md)를 확인하십시오. 특정 린터 구성에 달려 있습니다. – Toby