为什么Material-UI和Facebook登录示例的“无效挂机呼叫警告"无效? [英] Why 'Invalid Hook Call Warning' for Material-UI and Facebook Login example for React?

问题描述

此代码有什么问题?我将其从material-ui示例和facebook登录按钮react示例放到一起.

What is wrong in this code? I put it together from a material-ui example and facebook login button react example.

import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import FacebookLogin from 'react-facebook-login';

export default class Demo extends Component {

  useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }));

  classes = this.useStyles();
  handleClick = event => this.setState({ anchorEl: event.currentTarget })
  handleClose = () => this.setState({ anchorEl: null })
  state = {
    isLoggedIn: false,
    userID: '',
    name: '',
    email: '',
    piture: '',
    anchorEl: null,
    setAnchorEl: null
  };

  componentClicked = () => {
    console.log("componentClicked");
  };

  responseFacebook = (response) => {
    console.log(response);
    this.setState({
      isLoggedIn: true,
      userID: response.userID,
      name: response.name,
      email: response.email,
      picture: response.picture
    });
    console.log(response);
  };

  render() {
    let fbContent;
    if (this.state.isLoggedIn) {
      fbContent = "hello"; //this.state.name;
    } else {
      fbContent = (<FacebookLogin appId="2526636684068727"
            autoLoad={true}
            fields="name,email,picture"
            onClick={this.componentClicked}
            callback={this.responseFacebook}
            cssClass="my-facebook-button-class"/>);
    }

    return (
    <div>
    <AppBar position="static">
    <Toolbar>
    <Typography variant="h6" className={this.classes.title}>
      Tiket.hu
    </Typography>
    <Button color="inherit">Search</Button>
    <Button color="inherit">Basket</Button>
    {fbContent}
    </Toolbar>
    </AppBar>
    {fbContent}
    </div>
    );
  }
}

推荐答案

我也遇到过这样的情况，这真的很奇怪，因为我将所有东西都取出来并放入了单独的组件中.

I have also faced a situation like this, and this is really strange what I did was I took out everything and put inside separate component.

在您的情况下，您可能希望将所有Fb登录功能都带到一个单独的组件中，然后将该组件导入到您的主要组件中

In your case you might want to take out all your Fb login functionality into a separate component and just import this component into your main component

这篇关于为什么Material-UI和Facebook登录示例的“无效挂机呼叫警告"无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！