Question

我正在将本机与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);

Answer 1

这是因为您没有将onPress道具传递给RestaurantMenu组件。您的RestaurantMenu通话应如下所示，

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

将对象从组件传递到另一个组件

1 个答案: