0

Estou tentando executar um projeto, porém o mesmo está exibindo um erro no console relacionado à uma função que tenho, o erro é o seguinte:

"63:25  error  Parsing error: Unexpected token, expected (
 function toggleDrawer = (open) => () => {
^
state={"

Meu projeto é esse:

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Toolbar from 'material-ui/Toolbar';
import MenuIcon from 'material-ui-icons/Menu';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import '../assets/scss/main.scss';
import img from '../assets/images/react.png';

const styles = theme => ({
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  inputProps: {
    step: 300,
  },
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
  paper: {
    padding: 50,
    textAlign: 'center',
    border: '5px solid black',
    width: '100%',
  },
  paper1: {
    backgroundColor: 'red',
    marginTop: '13%',
  },
  img: {
    width: '45%',
  },
  appbar: {
    marginLeft: '-20.20%',
    marginTop: '-20%',
    width: '139.99%',
  },
});

function ButtonAppBar(props) {
  const { classes } = props;
  const state = {
    inputs: {},
  };

  function toggleDrawer = (open) => () => {

      state={

        open:false,  
      };
    this.setState({
      open,
    });
  };

  const updateInputValue = (evt) => {
    state.inputs[evt.target.name] = evt.target.value;
    console.log(state.inputs);
  };

  const handleSubmit = (event) => {
    // console.log('handleSubmit', username, password);
    if (!event.target.checkValidity()) {
      console.log({ displayErrors: true });
    }
    event.stopPropagation();
    event.preventDefault();
    return 0;
  };
  return (
    <div className={styles.root}>
      <Grid container spacing={8} alignItems="center" justify="center">
        <Paper className={classes.paper}>
          <AppBar position="static" className={classes.appbar}>
            <Toolbar>
              <IconButton onClick={this.toggleDrawer(true)} className={classes.menuButton} color="contrast" aria-label="Menu">
              <Drawer open={this.state.open} onClose={this.toggleDrawer('open', false)}>
              onClick={this.toggleDrawer('open', false)}
              </Drawer>
                <MenuIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <img src={img} alt="React" className={classes.img} /><br />
          <form onSubmit={handleSubmit} noValidate>
            <TextField id="email" type="email" label="Usuário" className={classes.user} value={state.inputs.username} onChange={evt => updateInputValue(evt)} /><br />
            <TextField id="password" type="password" label="Senha" className={classes.senha} value={state.inputs.password} onChange={evt => updateInputValue(evt)} />
            <AppBar position="static" className={classes.paper1}>
              <Link to="/Orders">
                <Button type="submit" color="contrast">Login</Button>
              </Link>
            </AppBar>
          </form>
        </Paper>
      </Grid>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

2 Respostas 2

1

Você está usando um componente funcional sem estado ("Stateless functional component"), definido assim:

function MeuComponente(props) {
  return (
    {/* Template aqui */}
  );
}

Esse componente não mantém estado. Usando coisas como this.setState não faz sentido. Outra coisa também é que seu método toggleDrawer está retornando uma função. Não sei se você realmente quis fazer isso.

Você deve usar um componente de classe se quiser manter estado, como esse:

class MeuComponente extends React.Component {
  render() {
    return (
      {/* Template aqui */}
    );
  }
}

Documentação: https://reactjs.org/docs/state-and-lifecycle.html#converting-a-function-to-a-class

0

Incrementando a resposta do @nbkhope, após você fazer as modificações necessárias para se utilizar state, seu problema irá persistir, devido ao erro de síntaxe. Arrow functions possui síntaxe mais curta.

O correto para sua função seria:

toggleDrawer = (open) => {
    this.setState({
        open: open
    });
};

Você também pode fazer assim:

toggleDrawer(open) {
    this.setState({
        open: open
    });
};

Vale lembrar que ao fazer como o código acima, você devera fazer um bind do método toggleDrawer para poder utilizar o this dentro dele.

...
constructor(props) {
    super(props);
    this.state = {
        open: false
    };
    this.toggleDrawer = this.toggleDrawer.bind(this);
}
...

Exemplo funcionando no stackblitz.

Leitura recomendada:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .