Flatlist undefined 不是 React-native 的对象

Question

我正在使用 Expo 构建一个简单的 React-native 应用程序，用于对 Github 存储库进行评级，但遇到了一个令人讨厌的问题。当我尝试使用 Flatlist 呈现存储库列表时，它会抛出以下错误： undefined is not an object (evaluateing '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：

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-native/issues/24421，解决方案是从 .babelrc 中删除这个模块。问题是我的 babel.config.js 非常简单，我看不出如何排除这个模块，使 babel 工作。我的 babel.config.js：

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

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

Answer 1

我认为您的问题在于在FlatList 的renderItem 方法中解构repository。 您不能随意解构任何内容，您必须从 Flatlist 中解构 item。

试试这个方法：

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}/> }
        />
      );
    };