apollo react 应用程序中的 eslint 错误 "data is missing in props validation"

Question

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

中的 "data"

我应该做其他事情来遵守 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

您必须将道具类型添加到您的文件中：

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

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

AirBnB linter 将确保这一点作为最佳实践。

apollo react 应用程序中的 eslint 错误 "data is missing in props validation"

eslint error "data is missing in props validation" in apollo react app

eslint

react-apollo

eslint-config-airbnb