反应本机| 在组件中找不到变量

Question

在我的本机应用程序中，我想连接3个文件

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

File 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，以便它重新编译并找到更改后的文件夹位置。