对象未添加到数组，redux

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，即 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 作为有效负载返回，但在减速器中，您访问的是 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
}

这意味着在你的 reducer 中你应该通过以下方式获取新数据：

action.payload

而不是：

action.newItem

所以正确的reducer应该是这样的：

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

Answer 3

我想你误解了bind 函数的使用。正如doc 所说：

bind() 方法创建一个新函数，在调用该函数时，其 this 关键字设置为提供的值

因此，在这里，当您按下按钮时，您并没有调用该方法，而是创建了一个新方法。您应该将bind 调用移动到constructor（并且不要忘记分配它的返回值！），然后只需执行此onPress={this.carter} 即可在按下时调用您的函数。

也许明智的做法是在代码中添加一些日志以查看发生了什么，redux 一开始可能会变得相当混乱：)