ReferenceError，因为未传递变量

Question

在我的react原生应用程序中，我有一个ProductScreen，其中导入两个文件来完成屏幕。

文件1(Products.js(是我的产品列表

文件2(Data.js(是我的数据文件(仅临时(

import Products from '../../components/Products';
import { shoes} from '../../Data';

---

在我的ProdcutScreen中，我使用导入的Products作为component，并将products的值设置为shoes

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

---

然后在Product.js文件中，我尝试将我的产品列表的state设置为产品(当在ProdcutScreen中调用时，将其设置为shoes(

state = {
products, 
filteredProducts: products,
};

---

这就是问题的作用所在，因为我得到了错误

ReferenceError: ReferenceError: ReferenceError: ReferenceError: Can't find variable: products

问题来自Products.js文件中的第16行，即

state = {
products, 
filteredProducts: products,
};

因此，从Data.js文件中收集的值shoes似乎没有传递给状态。

---

我的问题是如何传递此值？

当我不设置state，只是像这个一样呈现列表时，列表确实有效

{this.renderProducts(this.props.products)}

但我需要设置状态，因为我希望能够过滤我的产品。

---

ProductScreen.js

import { drinks } from '../../Data';
import { connect } from 'react-redux';
export  class ProductScreen extends React.Component {
static navigationOptions = {
headerTitle: 'shoes'
}


render() {
return (
<View style={styles.container}>
<Products products={shoes} onPress={this.props.addItemToCart}/> 
<View >
{/* <TouchableOpacity style={styles.checkOutContainer} onPress={() => this.props.onPress(item)} > 
<Icon style={styles.checkmark} name="ios-checkmark" color="white" size={35} />
</TouchableOpacity> */}
</View>
</View>
)
}
}

---

Data.js

export const shoes= [
{
id: 1,
name: 'Hurrace',
brand: 'Nike',
type: 'strong',
price: 7,
},
]

---

产品.js

class Products extends Component {
state = {
products, 
filteredProducts: products,
};
setSearchText(event) {
const searchText = event.nativeEvent.text;
const textLength = this.state.products.length;
const filteredTexts = this.state.products.filter(row => {
return row.name.indexOf(searchText) !== -1;
});
console.log("text: " + JSON.stringify(filteredTexts));
this.setState({
searchText,
filteredProducts: filteredTexts
});
}
renderProducts = (products) => {
console.log(products)
return products.map((item, index) => {
return (
<View key={index} style={styles.shoes}>
<View style={styles.text}>
<Text style={styles.name}>
{item.name}
</Text>
<Text style={styles.price}>
€ {item.price}
</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={() => this.props.onPress(item)} > 
<Icon style={styles.button} name="ios-add" color="white" size={25} />
</TouchableOpacity>
</View>
</View>
)
})
}

---

我还在学习母语反应，几个月前就开始了

Answer 1

如果您打算使用props作为初始值，则不能使用实例属性。你需要通过构造函数来完成(在传递道具的地方(：

class Products extends Component {
constructor(props) {
super(props);
const { products } = this.props;
this.state = {
products, 
filteredProducts: products,
};
}
...