阿波罗反应应用程序中的eslint错误“道具验证中缺少数据”

Question

不确定我是否理解这个 eslint 错误要求我做什么。我正在使用 apollo 客户端演示代码，它似乎不喜欢 function 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);

Answer 1

你必须在你的文件中添加 proptypes：

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

将此添加到您的 PostList 函数下方。 PropTypes 是一种验证传递给 React 应用程序组件的数据类型的方法。

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