2016-11-15 36 views
0

不知道我明白这个eslint错误要求我做什么。我正在使用apollo客户端演示代码,它似乎不喜欢“数据”function PostList({ data: { loading, posts } }) {eslint错误“数据缺少道具验证”在apollo反应应用

我应该做其他事情来遵循airbnb 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功能。 PropTypes是一种验证传递给React应用中组件的数据类型的方法。

AirBnB linter尽可能确保这是最佳实践。

+0

现在另一个lint错误 - 它说道具类型对象被禁止 – MonkeyBonkey

+0

你可以使用'React.PropTypes.any'并且它会通过验证。然而,这个想法是,无论你传递的是什么,你声明为PropType。 – Toby

+0

此外,请查看此[链接](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md)以获取有关禁止道具类型的更多信息 - 此将取决于你的特定棉绒配置。 – Toby