this.props.onPress (row) не определяется при добавлении элементов вложенного массива в хранилище Redux

Question

У меня React-Native запущено приложение с Redux, и я пытаюсь добавить в свой магазин вложенные элементы массива (продукты).

Как работает экран?

1. Данные из productScreen передаются с предыдущего экрана (выбранный продукт)
2. Цикл черезданных и найдите вложенный массив и отобразите его в FlatList
3. Добавить / удалить выбранный продукт в корзину (приставка)

Ват работает?

1. Данные из productScreen передаются с предыдущего экрана (выбранный продукт)
2. Цикл данных, поиск вложенного массива и отображение его в FlatList

Что не работает:

Добавить / удалить выбранный продукт в корзину (приставка)

При переходе к экрану я получаю сообщение об ошибке this.props.onPress (строка) не является функцией.this.props.onPress (строка) не определена.

Я пытался найти решения в Интернете и на официальной веб-странице Redux , но не смог найти способ решить эту головоломку.Прежде чем я вложил массив и отобразил продукты на отдельном компоненте, который затем был загружен на страницу, он действительно работал.

Кто-нибудь знает, как добавить мой вложенный массив в хранилище?

FlatList

        <FlatList
        style={styles.listContainer}
        data={this.state.filteredProducts}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index.toString()}
        />

RenderItem

renderItem = ({item}) => {
    let items = [];
    if( item.products) {
      items = item.products.map(row => {
        return (<View key={row.id} style={styles.products}>
            <View style={styles.iconContainer}> 
                <Icon name={row.icon} color="#DD016B" size={25} />
            </View>
            <View style={styles.text}>
                <Text style={styles.name}>
                    {row.name}

                </Text>
                <Text style={styles.price}>
                € {row.price}
                </Text>
            </View>
            {console.log('renderItem',this.state.row)}
            <View style={styles.buttonContainer}  onPress={this.props.addItemToCart} >
                <TouchableOpacity onPress={this.props.onPress(row)} > 
                   <Icon style={styles.button} name="ios-add" color="white" size={25} />
                </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}  onPress={this.props.removeItem} >
                <TouchableOpacity onPress={() => this.props.onPress(row)} > 
                    <Icon style={styles.button} name="ios-remove" color="white" size={25} />
                </TouchableOpacity> 
            </View>
        </View>)

      })
    }

Добавление товара в магазин

    const mapDispatchToProps = (dispatch) =>{

    return{
        addItemToCart:(product) => dispatch({
            type:'ADD_TO_CART', payload: product, qty

        }),

        removeItem:(product) => dispatch ({
            type:'REMOVE_FROM_CART' , payload: product, qty
        })  
    }

}

export default connect(null, mapDispatchToProps) (ProductScreen);

Store.JS

import {createStore} from 'redux';
import cartItems from '../reducers/carItems';

export default store = createStore(cartItems)

cartItems.JS

const cartItems = (state = [], action) => {
    switch (action.type)
    {
        case 'ADD_TO_CART':
        // console.log('CarItems.JS', action.payload)
            if (state.some(cartItem => cartItem.id === action.payload.id)) {
                // increase qty if item already exists in cart
                return state.map(cartItem => (
                    cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty + 1 } : cartItem

                    ));

            }
            return [...state, { ...action.payload, qty: 1 }]; // else add the new item to cart

        case 'REMOVE_FROM_CART':
            return state
                .map(cartItem => (cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty - 1 } : cartItem))
                .filter(cartItem => cartItem.qty > 0);
    }
    return state
} 

export default cartItems 

Answer 1

Похоже, вы передаете результат вызова функции в реквизит onPress TouchableOpacity.

Возможно, вы захотите попробовать изменить <TouchableOpacity onPress={this.props.onPress(row)} > на <TouchableOpacity onPress={() => this.props.onPress(row)} >, как вы это сделали во втором случае.