为什么 'Invalid Hook Call Warning' 用于 Material-UI 和 Facebook 登录示例用于 React？

Question

这段代码有什么问题？我从 material-ui 示例和 facebook 登录按钮反应示例中将其组合在一起。

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，其中 returns 是一个 hook（通常命名为 useStyles）并且无法从 class 中调用挂钩基于组件。这是抛出错误的部分

classes = this.useStyles()

使用 connect 而不是 makeStyles。

connect 是一个 high order component，它在功能组件和基于 class 的组件中序列化 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

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

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

为什么 'Invalid Hook Call Warning' 用于 Material-UI 和 Facebook 登录示例用于 React？

Why 'Invalid Hook Call Warning' for Material-UI and Facebook Login example for React?

facebook-graph-api

facebook-login

reactjs

material-ui