在本机反应中使用 redux 时找不到变量 addproduct 错误

Question

我在 flatlist 中有以下代码，用于使用 redux 将产品添加到购物车

<View style={styles.priceContainer}>
  <Text style={styles.gridItemTitle}>${item.price}</Text>
  <Button size="small" onPress={()=> addproduct(item)} style={styles.addBtn} accessoryLeft={PlusIcon} />
</View>

这就是我在功能组件底部使用 map Dispatch 道具的方式

const mapStateToProps = (state) => {
    console.log(state);
    return {
        products: state.groceryReducer.productList
    }
}
    
const mapDispatchToProps = (dispatch) => {
    return {
        addproduct: (product) => dispatch(addToCart(product))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Products)

但显示 error can't find variable addproduct 你能告诉我为什么会收到这个错误或者我做错了什么解决方案或建议吗？提前致谢

Answer 1

如果您正在使用 class 组件，您应该使用 this.props:

<View style={styles.priceContainer}>
  <Text style={styles.gridItemTitle}>${item.price}</Text>
  <Button size="small" onPress={()=> this.props.addproduct(item)} style={styles.addBtn} accessoryLeft={PlusIcon} />
</View>

如果您使用的是函数式组件，则必须像这样传递 props 和函数的参数：

const ProductPage(props) => {
  return (
    <View style={styles.priceContainer}>
      <Text style={styles.gridItemTitle}>${item.price}</Text>
      <Button size="small" onPress={()=> props.addproduct(item)} style={styles.addBtn} accessoryLeft={PlusIcon} />
    </View>
  )
}

或者像这样只传递 props 的函数：

const ProductPage({addproduct}) => {

}

在本机反应中使用 redux 时找不到变量 addproduct 错误

Can't find variable addproduct error in while using redux in react native

reactjs

react-native

react-redux

react-native-android

react-native-flatlist