Question

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

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

文件2 Products用于构建商品样式和布局的位置

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

当我将Data和Products文件导入我的ProductListScreen时似乎可以正常工作，但是由于未知的原因，我得到了ReferenceError的说明，Can't find variable products < / p>

此错误发生在我的应用程序中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
components文件夹
- 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，以便它重新编译并找到更改后的文件夹位置。

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

1 个答案: