“eslint错误”;道具验证中缺少数据”;在apollo react应用程序中

“eslint错误”;道具验证中缺少数据”;在apollo react应用程序中,eslint,react-apollo,eslint-config-airbnb,Eslint,React Apollo,Eslint Config Airbnb,我不确定我是否理解这个eslint错误要求我做什么。我正在使用apollo客户端演示代码,它似乎不喜欢函数PostList({data:{loading,posts}}){ 我应该做些其他事情来遵守airbnb eslint规则,还是应该忽略它 import React from 'react'; import { Text, View } from 'react-native'; import { graphql } from 'react-apollo'; import gql from '

我不确定我是否理解这个eslint错误要求我做什么。我正在使用apollo客户端演示代码,它似乎不喜欢
函数PostList({data:{loading,posts}}){

我应该做些其他事情来遵守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);
从“React”导入React;
从“react native”导入{Text,View};
从'react apollo'导入{graphql};
从“graphql标签”导入gql;
常量样式={
外部:{paddingTop:22},
包装器:{height:45,flex:1,flexDirection:'row'},
标题:{fontSize:20},
subtextWrapper:{flex:1,flexDirection:'row'},
投票:{颜色:'#999'},
}
//下面的包装器提供的数据属性包含,
//在查询进行时使用“loading”键,并在准备就绪时发布
函数PostList({data:{loading,posts}}){
如果(装载){
回装;
}否则{
返回(
{posts.sort((x,y)=>y.voces-x.voces).map(post=>(
{post.title}
通过{post.author.firstName}{'}
{post.author.lastName}{'}
{事后投票}投票
))}
);
}
}
//“graphql”包装器执行graphql查询并生成结果
//可在包装组件的“数据”属性中找到(此处为PostList)
导出默认图形QL(gql`
查询所有帖子{
职位{
身份证件
标题
投票
作者{
身份证件
名字
姓氏
}
}
}
`)(后发名单);

您必须将PropType添加到文件中:

PostList.propTypes = {
  data: React.PropTypes.object,
};
将其添加到PostList函数下面。PropTypes是验证传递给React应用程序中组件的数据类型的一种方法


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

现在又出现了一个lint错误-它说禁止使用道具类型对象。您可以使用
React.PropTypes.any
,它将通过验证。但是,其思想是,无论您通过什么,都是您声明为道具类型的。此外,请检查此以了解有关禁止道具的更多信息pes-这将取决于您的具体棉绒配置。嗯,它也不喜欢任何一种-不知道是否有airbnb棉绒样式(有一些更改)适用于apollo客户端示例您的问题的答案是添加道具类型。但是,如果您的配置中禁止某些道具类型,则您将继续看到此错误。我使用AirBnB linter,但我没有禁止任何道具类型。