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

Question

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

文件1Data我当前将测试数据存储在中的位置

文件2Products产品项目的造型和布局是建立

文件3ProductListScreen显示的产品列表

当我导入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
• 数据.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'
}
});

Answer 1

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