Объект не добавляется в массив, редукс

Question

У меня есть действие, которое нужно использовать для добавления объекта в конец массива, но когда я запускаю onPress, который будет запускать действие, он всегда возвращается с ошибкой item.image not found, это означает, что это не 'Не вижу свойства только что добавленного объекта image. Пожалуйста, что я делаю неправильно и почему он не добавляет объект со свойствами в массив

Действие

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

СОКРАЩЕНИЕ И ПЕРВОНАЧАЛЬНЫЕ СОСТОЯНИЯ

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.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

Требуется коррекция в редукторе.В действиях вы возвращаете newItem в качестве полезной нагрузки, но в редукторе вы получаете доступ к action.newItem Вместо action.payload, который является неправильным

Добавьте приведенное ниже изменение в редуктор и попробуйте

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

Также в ITEMSдобавить ниже изменения

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

Answer 2

Ваше действие направляет объект с этой формой:

{
  type: "ADD_CART", payload: newItem
}

Это означает, что в вашем редукторе вы должны получить новые данные через:

action.payload

А не:

action.newItem

Итак, правильный редуктор должен выглядеть так:

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

Answer 3

Я думаю, вы неправильно поняли использование функции bind.Как говорит doc :

Метод bind () создает новую функцию, которой при вызове присваивается ключевое слово this указанное значение

Таким образом, здесь, когда вы нажимаете кнопку, вы не вызываете метод, а создаете новый.Вы должны переместить вызов bind на constructor (и не забудьте присвоить его возвращаемое значение!) И просто сделать это onPress={this.carter}, чтобы вызвать вашу функцию при нажатии.

Возможно, это будетразумно добавить в ваш код журнал, чтобы увидеть, что происходит, вначале излишне сложно понять:)