Почему «Недопустимое предупреждение о вызове крюка» для Material-UI и пример входа в Facebook для React? - PullRequest
Новая
       47

Почему «Недопустимое предупреждение о вызове крюка» для Material-UI и пример входа в Facebook для React?

1 голос
/ 30 октября 2019

Что не так в этом коде? Я соединил это из примера Material-UI и примера реакции кнопки входа в Facebook.

enter image description here

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

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Я также столкнулся с такой ситуацией, и это действительно странно, что я сделал, я вынул все и поместил в отдельный компонент.

В вашем случае вы можете удалить все свои Fb логинфункциональность в отдельный компонент и просто импортируйте этот компонент в ваш основной компонент

1 голос
/ 30 октября 2019

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} />
})
...