0

Estou com um problema de não saber onde colocar a const "const [open, setOpen] = React.useState(false);" de um Modal do Material UI, dentro da minha classe GenerateReport.

Quando coloco " const [open, setOpen] = React.useState(false);" dentro do render, aparece o erro "× Error: Invalid hook call. Hooks can only be called inside of the body of a function component".

Meu código está assim:

import React, { Component } from 'react';

//modal:
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';

import { connect } from 'react-redux';
import firebase from 'firebase/app';
import _ from 'lodash';
import { Link } from 'react-router-dom';
import { Form, Select, DatePicker, Popover } from 'antd';
import { LoadingOutlined, DownloadOutlined } from '@ant-design/icons';
import Button from '@material-ui/core/Button';
import { Container, ActionsForm, Loading } from './styles';

import ReactToExcel from 'react-html-table-to-excel';

import { changePage } from '../../../store/modules/user/actions';
import {
    getAllEstablishmentsRequest,
    getLocationsRequest,
} from '../../../store/modules/establishment/actions';

const { RangePicker } = DatePicker;

const configValidation = {
    rules: [
        {
            type: 'array',
            required: true,
            message: 'Esse campo é obrigatório!',
        },
    ],
};

const formRef = React.createRef();

// const rangeValue = fieldsValue['range-picker'];

class GenerateReport extends Component {

    state = {
        file: null,
        update: false,
        searchText: '',
        searchedColumn: '',
        establishment: [],
        loading: false,
    };

    componentDidMount() {
        this.setState({ loading: true });
        // const { state } = this.props.location;

        this.props.getLocationsRequest();
        this.props.changePage(
            'relatorio',
            'GERADOR DE RELATÓRIOS',
            '',
            ''
        );

        // this.props.getAllEstablishmentsRequest(this.props.profile)

        firebase
            .database()
            .ref('/estabelecimentos_pedidos')
            .once('value')
            .then(snapshot => {
                if (!this.props.profile.franqueado) {
                    this.setState({ establishment: _.values(snapshot.val()), loading: false });
                } else {
                    const establishment = _.values(snapshot.val())
                        .map(usuario => {
                            if (usuario.email === this.props.profile.email) return;
                            if (usuario.localizacao === this.props.profile.localizacao) {
                                return usuario;
                            }
                        })
                        .filter(establishment => establishment !== undefined);
                    this.setState({ establishment, loading: false });
                }
            })
            .catch(err => {
                this.setState({ loading: false });
            });
    }


    onFinish = async values => {
        let localizacaoRef = '';

        let fieldsValue = 0;

        this.props.locations.map(location => {
            if (location.nome === values.localizacao) {
                localizacaoRef = location.uid;
            }
        });

        this.props.getAllEstablishmentsRequest({
            estabeReference: values.estabeReference,
            nome: values.nome,
            localizacao: values.localizacao,
            localizacaoRef,
            rangeValue: values.pedidos,
        });
    };

    onChange = e => {
        this.setState({ file: e.target.files[0] });
    };

    handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm();
        this.setState({
            searchText: selectedKeys[0],
            searchedColumn: dataIndex,
        });
    };

    render() {
        const {
            loading,
            locations,
            loadingLocations,
            loadingEstablishments,
            establishments,

        } = this.props;


        const [open, setOpen] = React.useState(false);

        //modal:
        const handleOpen = () => {
            setOpen(true);
        };

        const handleClose = () => {
            setOpen(false);
        };

        return (
            <Container>

                <h1>Gerar Relatório Específico</h1>

                <Form ref={formRef} onFinish={this.onFinish}>

                    <Popover
                        content={<strong>Período para o relatório</strong>}
                        placement="right"
                        trigger="hover"
                    >
                        <Form.Item name="range-picker" {...configValidation}>
                            <RangePicker
                                format="DD/MM/YYYY"
                                style={{ width: '100%' }}
                            />
                        </Form.Item>
                    </Popover>

                    <Popover
                        content={<strong>Selecione a(s) Cidade(s)</strong>}
                        placement="right"
                        trigger="hover"
                    >
                        <Form.Item name="locations">
                            <Select
                                showSearch
                                mode="multiple"
                                optionFilterProp="children"
                                placeholder="Selecione a(s) Cidade(s)"
                                loading={loadingLocations}
                                filterOption={(input, option) =>
                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >=
                                    0
                                }
                            >
                                <Select.Option value="" disabled>
                                    Selecione a(s) Cidade(s)
                                </Select.Option>
                                {locations.map(location => (
                                    <Select.Option
                                        key={location.nome}
                                        value={location.nome}
                                    >
                                        {location.nome}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Popover>

                    <Popover
                        content={<strong>Selecione o(s) Estabelecimento(s)</strong>}
                        placement="right"
                        trigger="hover"
                    >
                        <Form.Item name="establishments">
                            <Select
                                showSearch
                                mode="multiple"
                                optionFilterProp="children"
                                placeholder="Selecione o(s) Estabelecimento(s)"
                                loading={loadingEstablishments}
                                filterOption={(input, option) =>
                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >=
                                    0
                                }
                            >
                                <Select.Option value="" disabled>
                                    Selecione o(s) Estabelecimento(s)
                                </Select.Option>
                                {establishments.map(establishment => (
                                    <Select.Option
                                        key={establishment.nome}
                                        value={establishment.nome}
                                    >
                                        {establishment.nome}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Popover>

                    {loading ? (

                        <Loading>
                            <LoadingOutlined />
                        </Loading>
                    ) : (

                            <Form.Item>


                                <ActionsForm>

                                    <button type="button" onClick={handleOpen}>
                                        react-transition-group
                        </button>
                                    <Modal
                                        aria-labelledby="transition-modal-title"
                                        aria-describedby="transition-modal-description"
                                        // className={classes.modal}
                                        open={open}
                                        onClose={handleClose}
                                        closeAfterTransition
                                        BackdropComponent={Backdrop}
                                        BackdropProps={{
                                            timeout: 500,
                                        }}
                                    >
                    
                                        <Fade in={open}>
                                            <div
                                            // className={classes.paper}
                                            >
                                                <h2 id="transition-modal-title">Transition modal</h2>
                                                <p id="transition-modal-description">react-transition-group animates me.</p>
                                            </div>
                                        </Fade>
                                    </Modal>

                                    <Button
                                        type="submit"
                                        disabled={loading}
                                        onClick={(_handleOpenTable) => window.open("", "_self")}
                                    >
                                        Gerar
                                </Button>

                                    {/* <button type="button" onClick={{}}>
                                        Open Modal</button> */}

                                    <ReactToExcel
                                        table="table-to-xls"
                                        filename={`Relatório-QPreço`}
                                        sheet="Tabela 1"
                                        buttonText="Exportar para Excel"
                                    >

                                        Teste
                                    </ ReactToExcel>

                                    <Link to="/reports">
                                        Voltar para Relatórios
                                </Link>
                                </ActionsForm>
                            </Form.Item>
                        )}

                </Form>

                <table id="table-to-xls">

                </table>
            </Container>

        );
    }
}

const mapStateToProps = state => ({
    loading: state.establishment.loading,
    locations: state.establishment.locations,
    loadingEstablishments: state.establishment.loading,
    establishments: state.establishment.establishments,
});

const mapDispatchToProps = {
    changePage,
    getLocationsRequest,
    getAllEstablishmentsRequest,
};

export default connect(mapStateToProps, mapDispatchToProps)(GenerateReport);

1
  • 1
    Você não pode utilizar os hooks dentro de um componente de classe, como diz no erro você só pode utilizar hooks dentro de um componente funcional. Acredito que vc possa incluir essa informação dentro do seu objeto de state. Commented 24/02/2021 às 18:57

1 Resposta 1

2

Cara.. você não pode usar o useState dentro do render, você deve passar essa informação antes do render.. dentro de um constructor como diz a documentação... Exemplo:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

https://pt-br.reactjs.org/docs/hooks-state.html

Edit1: Aplicando isso ao seu código vc alteraria primeiro o seu state

state = {
        file: null,
        update: false,
        searchText: '',
        searchedColumn: '',
        establishment: [],
        loading: false,
        open: false
    };

Depois removeria de dentro do render o código

const [open, setOpen] = React.useState(false);

        modal:
        const handleOpen = () => {
            setOpen(true);
        };

        const handleClose = () => {
            setOpen(false);
        };

E adicionaria ele logo a baixo da função handleSearch() assim:

    handleOpen = () =>  {
        this.setState({open: true})
    };
        
    handleClose = () => {
        this.setState({open: false})
    };

isso provavelmente resolveria o seu problema :)

2
  • 1
    Ótimo. Fico agradecido. E onde e como eu colocaria no meu código? Commented 25/02/2021 às 2:20
  • @RoberlanCarvalho atualizei a resposta para ficar mais fácil o seu entendimento
    – Igor
    Commented 25/02/2021 às 3:35

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 .