Question

我正在尝试传递auth变量和一个切换true和false的函数，以便我可以根据用户的状态（是否为auth）来控制为用户显示的内容

即使我认为一切都很好，我仍然收到此错误。.同样，我在类组件中使用的代码也可以工作，并且我可以console.log(props)在render函数旁边..我认为我缺少了一些东西在此功能组件中的这里..我需要另一只眼睛看一下，并告诉我哪里出了错

loginButtons.js:10 Uncaught TypeError: Cannot read property 'props' of undefined
    at onClick (loginButtons.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

这是我的home.js

import React, { Component } from "react";

import { GoogleLoginButton } from "./loginButtons";
import MenuBarApp from "./menuBarApp";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            auth: true,
        };
    }

    authStatus(status) {
        this.setState({ auth: status });
    }

    render() {
        const { auth } = this.state;
        return (
            <div>
                {auth ? (
                    <MenuBarApp auth={this.state.auth} authStatus={this.authStatus.bind(this)} />
                ) : (
                    <GoogleLoginButton auth={this.state.auth} authStatus={this.authStatus.bind(this)} />
                )}
            </div>
        );
    }
}

export default Home;

这是loginButtons.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

export function GoogleLoginButton(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Button variant="contained" size="large" color="primary" onClick={() => this.props.authStatus(true)}>
                Login with your Google Account
            </Button>
        </div>
    );
}

const useStyles = makeStyles((theme) => ({
    root: {
        "& > *": {
            margin: theme.spacing(1),
        },
    },
}));

Answer 1

您不必使用this.props，在功能组件中，props可以用作函数参数。

仅在class个组件中，道具才能以this.props的身份访问。

export function GoogleLoginButton(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Button variant="contained" size="large" color="primary" onClick={() => props.authStatus(true)}>
                Login with your Google Account
            </Button>
        </div>
    );
}

Answer 2

在 loginButton.js 中将this.props.authStatus(true)}更改为props.authStatus(true)} 因为它是功能组件，而不是基于类的组件。

export function GoogleLoginButton({authStatus}) {
const classes = useStyles();
    return (
            <div className={classes.root}>
                <Button variant="contained" size="large" color="primary" 
                 onClick={() => authStatus(true)}>
                    Login with your Google Account
                </Button>
            </div>
        );
  }

您可以使用解构。

将道具传递给子功能组件

2 个答案: