为什么Material-UI和Facebook登录示例的React会出现“无效的挂机呼叫警告”？

Question

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

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>
    );
  }
}

Answer 1

makeStyles是一个high order function，它返回一个hook（通常命名为useStyles），并且不能从基于类的组件中调用挂钩。这是引发错误的部分

classes = this.useStyles() 

使用connect代替makeStyles。

connect是high order component，它在功能组件和基于类的组件classes

中序列化props

import { connect } from '@material-ui/core/styles'

class Component extends React.Component{
    render(){
        const { classes } = this.props
        return <div className={classes.foo} />
    }
}
export default connect(styles)(Component)

//Works in functional components as well
const Component = connect(styles)(({ classes }) =>{
    return <div className={classes.foo} />
})

Answer 2

我也遇到过这样的情况，这真的很奇怪，我把所有东西都拿出来放入了单独的组件中。

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