javascript - 我无法使用数组和导入方法显示文本

Question

我不知道发生了什么，但没有显示任何文字。如果我实现了错误的方式或事情发生了变化，请帮助。下面是我的 CategoryScreen.js 的代码

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

import { CATEGORIES } from '../data/dummy-data';
const renderGridItem =itemData => {
return (
<View style ={styles.gridItem}>
<Text>{itemData.item.title}</Text>   
</View>
); //item in line 9 would be the item defined with this function
};

const CategoriesScreen = props =>{
   return(
    <FlatList
    data={CATEGORIES}
    renderItem={renderGridItem}
     numColumns={2} // numColumn is function that set no of columns - grid view
     />
   );
};

const styles = StyleSheet.create({
screen:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
},
gridItem:{
    flex:1,  //it can get as much space as it can get
    margin:15,
    height:150
}
});

export default CategoriesScreen;

下面是我的 dummy-data.js 代码//只是一个虚拟数据

import Category from '../models/category';

export const CATEGORIES = [
  new Category('c1', 'Italian', '#f5428d'),
  new Category('c2', 'Quick & Easy', '#f54242'),
  new Category('c3', 'Hamburgers', '#f5a442'),
  new Category('c4', 'German', '#f5d142'),
  new Category('c5', 'Light & Lovely', '#368dff'),
  new Category('c6', 'Exotic', '#41d95d'),
  new Category('c7', 'Breakfast', '#9eecff'),
  new Category('c8', 'Asian', '#b9ffb0'),
  new Category('c9', 'French', '#ffc7ff'),
  new Category('c10', 'Summer', '#47fced')
];

下面是我的category.js

// I will set how my data is shaped in this app in this file

class Category {

constructor(id, tittle, color) {
this.id = id;        // with help of this property i will store all data
this.tittle= tittle;  //in this right side constructor (...) has been called
this.color= color;     //this all features belongs to javascript
}
}

export default Category;

任何帮助和建议将不胜感激。谢谢。

Answer 1

更改此:

<Text>{itemData.item.title}</Text>

对此:

<Text>{itemData.item.tittle}</Text>

因为在您的构造函数中，您将其称为tittle。或者，您可以将 tittle 重命名为 title。我也不认为你需要 item，你可以只做 itemData.tittle 我认为。