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

减速器需要校正。在操作中，您将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}即可在按下时调用函数。

在代码中添加一些日志以查看正在发生的事情也许是明智的，redux在一开始可能会引起很大的混乱：）

对象未添加到数组，redux

3 个答案: