反应原生 |在组件中找不到变量

Question

在我的 react-native 应用程序中，我有 3 个文件要连接在一起

File 1 Data 我目前存储测试数据的位置

文件 2 Products 产品项目获得样式和布局的地方

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

当我将Data 和Products 文件导入我的ProductListScreen 时似乎工作正常，但由于未知原因，我得到一个ReferenceError 声明Can't find variable products

此错误发生在我的应用程序中 ProductListScreen 的第 73 行，即：

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

现在我无法弄清楚为什么它找不到 products，因为它是在

声明的

我的ProductListcreen 文件的第 16 行：

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

我没有正确导入它吗？还是有其他问题？

我几周前才开始使用 react-native 进行编程，请原谅我缺乏这方面的知识

---

目前我的文件结构是这样设置的

• App.js
• Data.js
• 屏幕文件夹
  • 产品文件夹
    • ProductListScreen.js
• 组件文件夹
  • Product.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'
    }
});

Answer 1

我需要重新启动 expo 以便它重新编译并找到更改的文件夹位置。