undefined不是物件（評估“this.props”）

我正在嘗試使用 TouchableOpacity 創建組態檔按鈕。我已經正確設定了 mapStateToProps 和 mapDispatchToProps。但是，當我將 onPress 設定為 this.props.openMenu 時，它指出 undefined 不是物件(evaluating 'this.props')

關于我能做些什么來解決這個問題的任何想法？我正在學習 React Native，所以我可能缺少一些東西。

這是我當前的代碼：

import React, { Component } from "react";
import {
  ScrollView,
  SafeAreaView,
  TouchableOpacity,
  Animated,
  Easing,
  StatusBar,
  Platform
} from "react-native";
import styled from "styled-components";
import Card from "../components/Card";
import { Ionicons } from "@expo/vector-icons";
import { NotificationIcon } from "../components/Icons";
import Logo from "../components/Logo";
import Course from "../components/Course";
import Menu from "../components/Menu";
import { connect } from "react-redux";

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

function mapDispatchToProps(dispatch) {
  return {
    openMenu: () => dispatch({
      type: "OPEN_MENU"
    })
  }
}

function HomeScreen() {
    return (
        <Container>
            <Menu />
            <SafeAreaView>
                <ScrollView>
          <TitleBar>
          <TouchableOpacity
                  onPress={this.props.openMenu}
                  style={{ position: "absolute", top: 0, left: 20 }}
                >
                        <Avatar source={require("../assets/avatar-default.jpg")} />
            </TouchableOpacity>
                        <Title>Welcome Back,</Title>
                        <Name>Censored</Name>
                        <NotificationIcon
                            style={{ position: "absolute", right: 20, top: 5 }}
                        />
                    </TitleBar>
                    <ScrollView
                        style={{ flexDirection: "row", padding: 20, paddingLeft: 12 }}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    >
                        {logos.map((logo, index) => (
                            <Logo key={index} image={logo.image} text={logo.text} />
                        ))}
                    </ScrollView>
                    <SubTitle>Pinned Posts</SubTitle>
                    <ScrollView
                        horizontal={true}
                        style={{ paddingBottom: 30 }}
                        showsHorizontalScrollIndicator={false}
                    >
                        {cards.map((card, index) => (
                            <Card
                                key={index}
                                title={card.title}
                                image={card.image}
                                caption={card.caption}
                                logo={card.logo}
                                subtitle={card.subtitle}
                            />
                        ))}
                    </ScrollView>
                    <SubTitle>Other Articles</SubTitle>
                    {courses.map((course, index) => (
                        <Course
                            key={index}
                            image={course.image}
                            title={course.title}
                            subtitle={course.subtitle}
                            logo={course.logo}
                            author={course.author}
                            avatar={course.avatar}
                            caption={course.caption}
                        />
                    ))}
                </ScrollView>
            </SafeAreaView>
        </Container>
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

提前致謝！

uj5u.com熱心網友回復：

您在這里使用的不是類組件，而是功能組件。功能組件中沒有this。您可以props直接訪問如下。

function HomeScreen(props) {
    return (
        <Container>
            <Menu />
            <SafeAreaView>
                <ScrollView>
          <TitleBar>
          <TouchableOpacity
                  onPress={props.openMenu}
                  style={{ position: "absolute", top: 0, left: 20 }}
                >

...

標籤：javascript 反应 反应式

上一篇：TextInputsecureTextEntry={true}不起作用（ReactNative}

下一篇：如何知道react-native專案中的React和React-Native版本？