Блог

Я использую react native с redux и хочу передать объект другому компоненту. Я не вижу, что я делаю не так, но я всегда получаю сообщение об ошибке: ‘Typeerror: _this.props.onPress не является функцией. (В ‘_this.props.onPress (item)’, ‘_this.props.onPress’ не определено). Вот мои два компонента.

 import React,{Component} from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class RestaurantMenu extends React.Component{

    renderMenu = (menu)=>{
        return menu.map((item,index)=>{
            const dishNumber = index   1;
            return(
                <View style={{flexDirection:'row'}} key={index}>
                    <Text > {dishNumber} {item.name}   {item.price}€   </Text>
                    <TouchableOpacity onPress={()=>this.props.onPress(item)}>
                        <Icon name='cart-plus'/>
                    </TouchableOpacity>
                </View>
            )
        })
    };

    render(){
        return(
            <View>
                {this.renderMenu(this.props.menu)}
            </View>
        )
    }
}
  

Второй компонент:

 import React, { useState } from "react";
import { StatusBar } from "expo-status-bar";
import { ImageBackground, StyleSheet, View, Text, TouchableOpacity, Image, ActivityIndicator } from "react-native";
import { connect } from 'react-redux';
import { RestaurantData } from '../../Data';
import RestaurantDetail from '../components/RestaurantDetail';
import RestaurantMenu from "../components/RestaurantMenu";
import RestaurantRating from "../components/RestaurantRating";


class RestaurantDetailTemplate extends React.Component {

    restaurantId=this.props.restaurantId;

    constructor(props){
        super(props);
        this.state={
            toggleDetailsMenuRating: 'Details'
        }
    }

    restaurantToggle=()=>{
        return(
            <View style={styles.toggleDetailsMenuRating}>
                <TouchableOpacity
                    onPress={()=>this.setState({toggleDetailsMenuRating: 'Details'})}
                >
                    <Text>Details   </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>this.setState({toggleDetailsMenuRating: 'Menu'})}
                >
                    <Text>Menu   </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>this.setState({toggleDetailsMenuRating: 'Bewertung'})}
                >
                    <Text>Bewertung</Text>
                </TouchableOpacity>
            </View>
        )};



    render() {
        if(this.state.toggleDetailsMenuRating==='Details'){
            return (
                <View style={styles.Background}>
                    {this.restaurantToggle()}
                    <RestaurantDetail restaurant={RestaurantData[this.restaurantId]} onPress={this.props.addItemToCart}/>
                </View>
            )
        }
        if(this.state.toggleDetailsMenuRating==='Menu'){
            return(
                <View style={styles.Background}>
                    {this.restaurantToggle()}
                    <RestaurantMenu menu={RestaurantData[this.restaurantId].card}/>
                </View>
            )
        }
        if(this.state.toggleDetailsMenuRating==='Bewertung'){
            return(
                <View style={styles.Background}>
                    {this.restaurantToggle()}
                    <RestaurantRating rating={RestaurantData[this.restaurantId].rating}/>
                </View>
            )
        }
        }
        }

function mapStateToProps(state) {
    return {
       restaurantId: state.restaurantId
    }
}






function mapDispatchToProps(dispatch) {
    return {
       addItemToCart: (item) => dispatch({type: 'ADD_ITEM_TO_CART',payload:item})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(RestaurantDetailTemplate);
  

Это потому, что вы не передаете onPress реквизиты RestaurantMenu компоненту. Ваш RestaurantMenu вызов должен выглядеть примерно так,

 <RestaurantMenu menu={RestaurantData[this.restaurantId].card} onPress={yourOnPressCallback}/>