javascript - 对象没有被添加到数组，redux

Question

我有一个用于将对象添加到数组末尾的操作，但是当我触发将运行该操作的 onPress 时，它总是返回错误 item.image not found ，这意味着它没有看到新添加的对象的属性 image，请问我做错了什么，为什么不将具有属性的对象添加到数组中

行动

export const addCart = newItem => ({type:
"ADD_CART", payload: newItem
});

reducer 和初始状态

const initialState = {
cartItems: [{
    image: 'img/lappy.png',
    name: 'Hand Bag',
    amount: '100000',
    id: 4
}]
};
const rootReducer = (state = initialState, action) => {
case ADD_CART: 
        return{
           ...state,
           cartItems: [...state.cartItems, action.newItem]
        };

触发操作的按钮

constructor(props) {
    super(props);
    this.state = {
        name: '',
        amount: '',
        description: '',
        qty: '',
        images: [],
        id: ''
    };
}
carter(){
    this.props.addCart(
        {image: this.state.images[0],
        name: this.state.name,amount: 
        this.state.amount,
        id: this.state.id});      
}
 <TouchableNativeFeedback onPress={this.carter.bind(this) }>
                               <View style={styles.addToCart}>
                               <Text style={{fontSize: 14, fontFamily: 'mont-medium', color: '#fff'}}>
                                   ADD TO CART
                               </Text>
                               </View>    
                              </TouchableNativeFeedback>

ITEMS，即 items.images

const cartItems = (
    <FlatList
        data={this.props.cartItems}          
        renderItem={({ item, index }) => ( 
            <View style={styles.productbox}>

<TouchableNativeFeedback onPress={() =>
            this.props.navigation.navigate('ProductDetail', {})}>
            <Image  resizeMode="contain" style={{borderRadius: 3,
width: 90,
height: 69,
marginLeft: '9%'}}
source={{uri: 'http://10.0.2.2:8000/'+item.image}}/>
</TouchableNativeFeedback>

<View style={styles.productTextBox}>
 <Text style={styles.productName}>
  {item.name}
 </Text>
 <Text style={styles.productPrice}>
  ₦{item.amount}
 </Text>
</View>

 <View style={styles.chatter}>
 <Image  resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
 source={require('../chatter.png')}/>
 </View>
 <TouchableNativeFeedback onPress={() =>this.props.removeCart(index)}>
 <View style={styles.chatter2}>
  <Image  resizeMode="contain" style={{alignSelf: 'center', flex: 1,}}
source={require('../cancel.png')}/>
 </View></TouchableNativeFeedback>
  </View>    
         )}
         keyExtractor={(item, index) => index}                
    />
    );

Answer 1

在reducer中需要修正。在操作中，您将 newItem 作为有效载荷返回，但在 reducer 中，您访问的是 action.newItem 而不是 action.payload，这是不正确的

在 reducer 中添加以下更改并尝试

 case ADD_CART: 
    return{
       ...state,
       cartItems: [...state.cartItems, action.payload]
    };

同样在 ITEMS 中添加以下更改

 <FlatList
    data={this.props.cartItems}          
    renderItem={( item, index) => (