Flatlist undefined 不是 React-native 对象

Question

我正在使用 Expo 构建一个简单的 React-native 应用程序来对 Github 存储库进行评级，但遇到了一个棘手的问题。当我尝试使用 Flatlist 呈现存储库列表时，它会抛出以下错误： undefined is not an object (evaluating 'repository.fullName'); 尽管我的代码与 React-native 文档中的代码几乎相同。这是渲染 Flatlist 的 RepositoryList.jsx：

import React from 'react';
import { FlatList, View, StyleSheet } from 'react-native';
import RepositoryItem from './RepositoryItem'

const styles = StyleSheet.create({
  separator: {
    height: 10,
  },
});

const repositories = [
  {
    id: 'rails.rails',
    fullName: 'rails/rails',
    description: 'Ruby on Rails',
    language: 'Ruby',
    forksCount: 18349,
    stargazersCount: 45377,
    ratingAverage: 100,
    reviewCount: 2,
    ownerAvatarUrl: 'https://avatars1.githubusercontent.com/u/4223?v=4',
  },
  {
    id: 'reduxjs.redux',
    fullName: 'reduxjs/redux',
    description: 'Predictable state container for JavaScript apps',
    language: 'TypeScript',
    forksCount: 13902,
    stargazersCount: 52869,
    ratingAverage: 0,
    reviewCount: 0,
    ownerAvatarUrl: 'https://avatars3.githubusercontent.com/u/13142323?v=4',
  }
];

const ItemSeparator = () => <View style={styles.separator} />;

const RepositoryList = () => {
  return (
    <FlatList
      data={repositories}
      ItemSeparatorComponent={ItemSeparator}
      renderItem={({repository}) => <RepositoryItem repository={repository}/> }
    />
  );
};

export default RepositoryList

和 RepositoryItem.jsx 应该在 Flatlist 中呈现：

import React from 'react'
import {View, Text, StyleSheet} from 'react-native'

const RepositoryItem = ({repository}) => {
  return(
    <View style={styles.item}>
      <Text>Full name:{repository.fullName}</Text>
      <Text>Description:{repository.description}</Text>
      <Text>Language:{repository.language}</Text>
      <Text>Stars:{repository.stargazersCount}</Text>
      <Text>Forks:{repository.forksCount}</Text>
      <Text>Reviews:{repository.reviewCount}</Text>
      <Text>Rating:{repository.ratingAverage}</Text>
    </View>
  )
}

styles = StyleSheet.create({
  item: {
    marginHorizontal: 16,
    backgroundColor: 'darkorange'
  },
});

export default RepositoryItem

经过我的研究，我发现很多人也遇到了这个问题，而且显然它从 0.59 开始就一直存在（我的 React-native 在 0.62，Windows 上）。显然，该错误是由 babel 模块“@babel/plugin-proposal-class-properties”引起的，根据此 Github 线程https://github.com/facebook/react，解决方案是从 .babelrc 中删除该模块-native/issues/24421。问题是我的babel.config.js非常简单，我不知道如何排除 babel 工作所需的这个模块。我的 babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

也许有一种方法可以通过调整 node_modules 中的 babel 来排除它，但这种解决方案似乎不太可能。任何有关此问题的帮助或建议将不胜感激！

Answer 1

我认为你的问题在于repository你的renderItem方法的解构FlatList。你不能只解构你想要的任何东西，你必须item从 Flatlist 解构。

试试这个方法：

const RepositoryList = () => {
  return (
    <FlatList
      data={repositories}
      ItemSeparatorComponent={ItemSeparator}
      renderItem={({ item }) => <RepositoryItem repository={item}/> }
    />
  );
};

或者，如果你真的想要

const RepositoryList = () => {
      return (
        <FlatList
          data={repositories}
          ItemSeparatorComponent={ItemSeparator}
          renderItem={({ item: repository }) => <RepositoryItem repository={repository}/> }
        />
      );
    };