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' 引起的，解决方案是从 .babelrc 中删除这个模块，根据这个 Github 线程 https://github.com/facebook/react-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

我认为您的问题在于 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}/> }
        />
      );
    };

Flatlist undefined 不是对象 React-native

Flatlist undefined is not an object React-native

babeljs

react-native

expo