React Native | Can't find variable in Component

Question

In my react-native app I've got 3 files I want to connect together

File 1 Data Where I've currently got my test data stored

File 2 Products Where the products items get styling and layout is build

File 3 ProductListScreen Where the list of products get displayed

When I importing the Data & Products file into my ProductListScreen seems to work fine, but for unknown reasons I get an ReferenceError stating Can't find variable products

This error happens on line 73 of the ProductListScreen in my app which is:

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

Now I can't figure out why it can't find products since it's declared at

line 16 of my ProductListcreen file :

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

Did I not import it correctly? Or is there something else at fault?

I've only started programming with react-native several weeks ago, so excuse me for my lack of knowledge on the subject

---

Currently my file structure is set up like this

• App.js
• Data.js
• Screens folder
  • Product folder
    • ProductListScreen.js
• components folder
  • Product.js

---

Data file

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
    }
]

---

Products file

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 file

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