0

Boa tarde,

Tenho um componente onde consumo dados de uma API, até ai tudo bem!

Estou tentando adicionar um modal do reactstrap e estou enfrentando o seguinte erro:

TypeError: Cannot convert undefined or null to object

O código completo do meu componente é:

import React from 'react';
import styled from 'styled-components';
import { Container, Row, Col, Card } from 'reactstrap';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

// api
import api from '../../servicos/Api';

const BoxPalestrantes = styled.div`
            .card{ background-color: transparent !important; border: 0; }
            .palestrantes{ background: #27ae60; width: 100%; padding: 5rem 0 5rem 0; }
            .palestrante-item{ margin-bottom: 1rem; }
            .foto-palestrante{ border-radius: 1rem;}
            .titulo{font-family: 'Oswald', sans-serif; font-size: 2rem; text-transform: uppercase; font-weight: bold; padding: 2rem 0 2rem 0; color:#fff;  }
            .subtitulo{font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 500;  }
            .palestrante-info{ position: absolute;  opacity: 0; transition: visibility 0s 0.1s, opacity 0.1s linear; height: 100%; width: 100%; align-items: center; flex-direction: column; justify-content: flex-end; display: flex; }
            .palestrante-info p{text-align: center; margin: 0; color: #fff; font-family: 'Oswald', sans-serif; font-size: 1rem; text-transform: uppercase; font-weight: bold;}
            .palestrante-info:hover{background: rgba(44, 62, 80, 0.90); padding: 10px; max-width: 100%; height: 100%;  opacity: 1; transition: opacity 0.1s linear; cursor: default; border-radius: 1rem;}
            .palestrante-item{ margin: 1rem 0 1rem 0; }
        `

export default class Palestrantes extends React.Component {

    // metodo construtor - modal
    constructor(props) {
        super(props);
        this.state = {
            modal: false
        };
        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState(prevState => ({
            modal: prevState.modal
        }));
    }



    // armeza o estado do objeto contendo os palestrantes
    state = { palestrantes: {} }

    // metodo executado assim que o componente é exibido em tela
    componentDidMount() {
        this.carregarPalestrantes();
    }

    carregarPalestrantes = async () => {
        //caminho da requiscao na api
        const response = await api.get("palestrante/todos/5a34a185-bbd8-461e-6ffd-08d6cccadba7");

        // atualiza o estado dos patrocinadores com base no retorno da api
        this.setState({ palestrantes: response.data })
    };

    render() {

        // armeza o estado do objeto para uso
        const { palestrantes } = this.state;

        // url de caminho das imagens
        const caminho = "https://localhost:44332/api/palestrante/Imagem/";

        return (
            <BoxPalestrantes>
                <div className="palestrantes">
                    <Row>
                        <Container>
                            <Col md={{ size: 12 }} xs={{ size: 12 }}>
                                <h1 className="titulo">Palestrantes</h1>
                            </Col>
                        </Container>
                    </Row>
                    <Row>
                        <Container>
                            <Col md={{ size: 12 }}>
                                <Row>
                                    {
                                        Object.keys(palestrantes).map((item) => {
                                            return (
                                                <Col xs={{ size: 12 }} md={{ size: 3 }} sm={{ size: 6 }} className="palestrante-item" key={palestrantes[item].id}>
                                                    <Card>
                                                        <img className="foto-palestrante" width="100%" src={caminho + palestrantes[item].foto} alt={palestrantes[item].nome} />
                                                        <div className="palestrante-info">
                                                            <p>{palestrantes[item].nome}</p>
                                                            <p>{palestrantes[item].descricaoCurta}</p>
                                                        </div>
                                                    </Card>
                                                </Col>
                                            )
                                        })
                                    }
                                </Row>
                            </Col>
                        </Container>
                    </Row>

                </div>

                <div>
                    <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
                    <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                        <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                        <ModalBody>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </ModalBody>
                        <ModalFooter>
                            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                        </ModalFooter>
                    </Modal>
                </div>
            </BoxPalestrantes>
        )
    }
}

Alguém pode me ajudar? Sou iniciante em ReactJs e desde já agradeço pela atenção!

1 Resposta 1

1

Resolvido!

Eu estava setando duas vezes o state de meu componente. Agora setei no meu método construtor da seguinte forma:

constructor(props) {
        super(props);
        this.state = {
            modal: false,
            palestrantes: {}
        };
1
  • 1
    Isso. Eu já ia perguntar o que era aquele ` state = { palestrantes: {} }` solto no meio da classe.
    – mari
    Commented 21/05/2019 às 19:54

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 .