React Native |在组件中找不到变量

在我的react本地应用程序中,我有3个文件要连接在一起

文件1 Data 我现在的测试数据存储在哪里

文件2 Products 产品项目的样式和布局是在哪里构建的

文件3 ProductListScreen 显示产品列表的位置

当我导入 数据 &安培; 产品 归档到我的 产品列表屏幕 看起来工作不错,但不知为什么我得到了一个 ReferenceError 陈述 Can't find variable products

此错误发生在 产品列表屏幕 在我的应用程序中:

<Products products={books} onPress={this.props.addItemToCart} />

现在我不明白为什么找不到 products 因为它是在

我的第16行 ProductListcreen 文件:

import Products from '../../components/Products';

我没有正确导入它吗?还是有什么别的问题?

我几周前才开始用react native编程,所以请原谅我对这个主题缺乏了解

目前我的文件结构设置如下

• 应用程序js
• 数据.js
• 屏幕文件夹
  • 产品文件夹
    • ProductListScreen.js产品列表
• 组件文件夹
  • 产品.js

数据文件

export const books = [
    {
        id: 4,
        name: 'How to Kill a Mocking Bird',
        price: 10
    },
    {
        id: 5,
        name: 'War of Art',
        price: 7
    },
    {
        id: 6,
        name: 'Relentless',
        price: 5.99
    }
]

产品档案

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";

class Products extends Component {

    renderProducts = (products) => {
        console.log(products)
        return products.map((item, index) => {
            return (
                <View key={index} style={{ padding: 20 }}>
                    <Button onPress={() => this.props.onPress(item)} title={item.name + " - " + item.price} />
                </View>
            )
        })
    }



    render() {
        return (
            <View style={styles.container}>
                {this.renderProducts(this.props.products)}
            </View>
        );
    }
}
export default Products;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

ProductListScreen文件

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet
} from "react-native";
import Products from '../../components/Products'
import { books } from '../../Data'
import { connect } from 'react-redux'

class ProductListScreen extends Component {

    static navigationOptions = {
        headerTitle: 'Electronics'
    }
    render() {
        return (
            <View style={styles.container}>
                <Products products={books} onPress={this.props.addItemToCart} />
            </View>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addItemToCart: (product) => dispatch({ type: 'ADD_TO_CART', payload: product })
    }
}

export default connect(null, mapDispatchToProps)(ProductListScreen);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});