[英]ERROR TypeError: undefined is not an object (evaluating 'state.map')
我正在嘗試更改我的“quantityCounter”的 state,但正如標題所述,我收到錯誤消息。 任何人都可以幫助我更改 state 而屏幕中的值也會發生變化嗎?
import React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { useSelector } from 'react-redux';
import { selectCartItems } from '../../../../redux/reducer/cartReducer';
import { selectAllItems } from '../../../../redux/reducer/itemReducer';
const CartList = () => {
const cartItems = useSelector(selectCartItems);
const itemData = useSelector(selectAllItems);
const [quantityCounter, setQuantityCounter] = React.useState(cartItems);
function quantityHandler({id, num}){
const targetItem = itemData.find((item) => item.id === id);
let targetCart = quantityCounter.find((cart) => cart.id === id);
setQuantityCounter((previousState) =>
previousState.forEach(
(item) => {
if(item.id === id){
Object.keys(item).find(key => {
if(key === 'quantity'){
if(num === 1 && targetCart.quantity < targetItem.availableItem){
item[key] = targetCart.quantity + 1;
}
if(num === 0 && targetCart.quantity > 0) {
item[key] = targetCart.quantity - 1;
}
}
})
}
}));
}
return (
<>
{quantityCounter.map((item) => (
<View style={styles.CartItemsContainer} key={item.id}>
<Text style={styles.textStyle}>{item.productName}</Text>
<Text style={styles.textStyle}>{item.productPrice}</Text>
<View style={styles.quantityContainer}>
<Button title='-' onPress={() => quantityHandler({id : item.id, num: 0})}/>
<Text style={styles.quantityContainer__text}>{item.itemQuantity}</Text>
<Button title='+' onPress={() => quantityHandler({id : item.id, num: 1})}/>
</View>
</View>
))}
</>
)
}
const styles = StyleSheet.create({
CartItemsContainer:{
flexDirection: 'row', alignSelf: 'stretch'
},
textStyle: {
flex: 1, alignSelf: 'stretch',
borderWidth: 1, borderTopColor: 'transparent',
textAlign: 'center', textAlignVertical: 'center'
},
quantityContainer:{
flex: 1, alignSelf: 'stretch', flexDirection: 'row',
borderWidth: 1, borderTopColor: 'transparent',
alignItems: 'baseline', justifyContent: 'center'
},
quantityContainer__text:{
marginHorizontal: 5, marginVertical: 5
}
});
export default CartList;
我做的另一種方法是這樣,但 state 只是在改變,在屏幕上它沒有。 當按下“quantityHandler”時,它會按預期工作,但我不知道如何修復或使其工作。 我嘗試了不同的方式,但我無法真正展示它。 請幫忙。
import React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { useSelector } from 'react-redux';
import { selectCartItems } from '../../../../redux/reducer/cartReducer';
import { selectAllItems } from '../../../../redux/reducer/itemReducer';
const CartList = () => {
const cartItems = useSelector(selectCartItems);
const itemData = useSelector(selectAllItems);
const [quantityCounter, setQuantityCounter] = React.useState(0);
let total = 0;
let id, quantity, name, price;
let cart_replica = [];
cartItems.forEach(item => {
id = item.id;
name = item.productName;
price = item.productPrice;
quantity = item.itemQuantity;
total += item.totalPrice;
cart_replica.push({id, name, quantity, price})
});
function quantityHandler({id, num}){
const targetItem = itemData.find((item) => item.id === id);
let targetCart = cart_replica.find((cart) => cart.id === id);
cart_replica.map(
(item) => {
if(item.id === id){
return { ...cart_replica, item: { ...item, quantity: item.quantity + 1}};
}
});
console.log(cart_replica[0])
}
return (
<>
{cart_replica.map((item) => (
<View style={styles.CartItemsContainer} key={item.id}>
<Text style={styles.textStyle}>{item.name}</Text>
<Text style={styles.textStyle}>{item.price}</Text>
<View style={styles.quantityContainer}>
<Button title='-' onPress={() => quantityHandler({id : item.id, num: 0})}/>
<Text style={styles.quantityContainer__text}>{item.quantity}</Text>
<Button title='+' onPress={() => quantityHandler({id : item.id, num: 1})}/>
</View>
</View>
))}
</>
)
}
const styles = StyleSheet.create({
CartItemsContainer:{
flexDirection: 'row', alignSelf: 'stretch'
},
textStyle: {
flex: 1, alignSelf: 'stretch',
borderWidth: 1, borderTopColor: 'transparent',
textAlign: 'center', textAlignVertical: 'center'
},
quantityContainer:{
flex: 1, alignSelf: 'stretch', flexDirection: 'row',
borderWidth: 1, borderTopColor: 'transparent',
alignItems: 'baseline', justifyContent: 'center'
},
quantityContainer__text:{
marginHorizontal: 5, marginVertical: 5
}
});
export default CartList;
你能檢查一下嗎,我添加了 state 操作。
希望能幫助到你:)
https://snack.expo.dev/5vfUoenH3
import React from 'react'; import { StyleSheet, View, Text, Button, SafeAreaView } from 'react-native'; const App = () => { const [quantityCounter, setQuantityCounter] = React.useState([ { id: 1, name: 'item 1', availableItem: 5, price: 500, quantity: 5, }, { id: 2, name: 'item 2', availableItem: 4, price: 500, quantity: 4, }, { id: 3, name: 'item 3', availableItem: 3, price: 500, quantity: 3, }, ]); const quantityHandler = (id,index,isIncrement) =>{ const newCopy = [...quantityCounter]; if(isIncrement){ newCopy[index].quantity = newCopy[index].quantity +1; }else { newCopy[index].quantity = newCopy[index].quantity -1; } console.log("er",newCopy,index) setQuantityCounter(newCopy) } return ( <SafeAreaView style={styles.safeStyle}> {quantityCounter.map((item,index) => ( <View style={styles.CartItemsContainer} key={item.id}> <Text style={styles.textStyle}>{item.name}</Text> <Text style={styles.textStyle}>{item.price}</Text> <View style={styles.quantityContainer}> <Button title='-' onPress={() => quantityHandler(item.id,index,false)}/> <Text style={styles.quantityContainer__text}>{item.quantity}</Text> <Button title='+' onPress={() => quantityHandler(item.id,index,true)}/> </View> </View> ))} </SafeAreaView> ) } const styles = StyleSheet.create({ safeStyle: { marginTop:'5%' }, CartItemsContainer:{ flexDirection: 'row', alignSelf: 'stretch' }, textStyle: { flex: 1, alignSelf: 'stretch', borderWidth: 1, borderTopColor: 'transparent', textAlign: 'center', textAlignVertical: 'center' }, quantityContainer:{ flex: 1, alignSelf: 'stretch', flexDirection: 'row', borderWidth: 1, borderTopColor: 'transparent', alignItems: 'baseline', justifyContent: 'center' }, quantityContainer__text:{ marginHorizontal: 5, marginVertical: 5 } }); export default App;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.