reactjs - 向 Redux 存储添加嵌套数组项时未定义 this.props.onPress(row)
问题描述
我已经React-Native
运行了我的应用程序,Redux
并且正在尝试将嵌套数组项(产品)添加到我的商店。
屏幕应该如何工作?
- 来自
productScreen
上一屏的数据(选定产品) - 循环遍历数据并找到嵌套数组并将其显示在
FlatList
- 将所选产品添加/删除到购物车(redux)
笏有效吗?
- 来自
productScreen
上一屏的数据(选定产品) - 循环遍历数据并找到嵌套数组并将其显示在
FlatList
什么不起作用是:
- 将所选产品添加/删除到购物车(redux)
当我导航到屏幕时,我收到错误 this.props.onPress(row) is not a function。this.props.onPress(row) 未定义。
我尝试在网上和Redux官方网页上寻找解决方案,但找不到解决这个难题的方法。在我嵌套数组并将产品显示在单独的组件上然后加载到页面上之前,它确实可以工作。
任何人都知道如何将我的嵌套数组添加到商店?
平面列表
<FlatList
style={styles.listContainer}
data={this.state.filteredProducts}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
/>
渲染项
renderItem = ({item}) => {
let items = [];
if( item.products) {
items = item.products.map(row => {
return (<View key={row.id} style={styles.products}>
<View style={styles.iconContainer}>
<Icon name={row.icon} color="#DD016B" size={25} />
</View>
<View style={styles.text}>
<Text style={styles.name}>
{row.name}
</Text>
<Text style={styles.price}>
€ {row.price}
</Text>
</View>
{console.log('renderItem',this.state.row)}
<View style={styles.buttonContainer} onPress={this.props.addItemToCart} >
<TouchableOpacity onPress={this.props.onPress(row)} >
<Icon style={styles.button} name="ios-add" color="white" size={25} />
</TouchableOpacity>
</View>
<View style={styles.buttonContainer} onPress={this.props.removeItem} >
<TouchableOpacity onPress={() => this.props.onPress(row)} >
<Icon style={styles.button} name="ios-remove" color="white" size={25} />
</TouchableOpacity>
</View>
</View>)
})
}
将产品添加到商店
const mapDispatchToProps = (dispatch) =>{
return{
addItemToCart:(product) => dispatch({
type:'ADD_TO_CART', payload: product, qty
}),
removeItem:(product) => dispatch ({
type:'REMOVE_FROM_CART' , payload: product, qty
})
}
}
export default connect(null, mapDispatchToProps) (ProductScreen);
商店.JS
import {createStore} from 'redux';
import cartItems from '../reducers/carItems';
export default store = createStore(cartItems)
购物车项目.JS
const cartItems = (state = [], action) => {
switch (action.type)
{
case 'ADD_TO_CART':
// console.log('CarItems.JS', action.payload)
if (state.some(cartItem => cartItem.id === action.payload.id)) {
// increase qty if item already exists in cart
return state.map(cartItem => (
cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty + 1 } : cartItem
));
}
return [...state, { ...action.payload, qty: 1 }]; // else add the new item to cart
case 'REMOVE_FROM_CART':
return state
.map(cartItem => (cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty - 1 } : cartItem))
.filter(cartItem => cartItem.qty > 0);
}
return state
}
export default cartItems
解决方案
看起来您正在将函数调用的结果传递给 TouchableOpacity 的 onPress 属性。
您可能想尝试更改
<TouchableOpacity onPress={this.props.onPress(row)} >
为
<TouchableOpacity onPress={() => this.props.onPress(row)} >
在第二种情况下所做的那样。
推荐阅读
- tableau-api - 混合 lod 和 non-lod 计算
- sqlite - 如何在 SQLite 触发器中使用 WITH 子句
- python - 在一行中加入不重复的行 - python
- java - Hybris Item:自定义属性和属性之间的区别
- javascript - React setState 不更新缩减数组
- markdown - Jekyll:显示不同类别的帖子
- json - 使用自定义 MarshalJSON 更改结构中的 JSON 标记
- java - 为什么这个while循环条件为真
- java - 如何将 ISO 8601 格式的 DateTime 转换为 Java 中的另一个时区?
- javascript - 基于javascript中字符串中间的文本对数组进行排序