Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro função map

Estou com esse erro. " TypeError: this.state.arrayCep.map is not a function " , e não sei como resolver.

import React from 'react';
import './App.css';
import styled from 'styled-components';
import axios from 'axios';
import ItemCEP from './components/ItemCEP/index'


const baseURL= "https://viacep.com.br/ws/";

const Container = styled.div`
/* display:flex;
justify-content:column; */
`

const Input = styled.input`
border: solid 2px green;
width:250px;
`


const Botao = styled.button`
border: none;
background-color: black;
width:150px;
height:30px;
color:white;
display: block;
margin:10px auto;

`

class App extends React.Component {
  constructor(props){
    super(props)

    this.state={
      cep:"",
      arrayCep: [],
    }
  }


  onChangeCep = (e) =>{
    this.setState({cep: e.target.value})
  }



  pegarCep = () =>{
    const request = axios.get(
       `${baseURL}${this.state.cep}/json/`
    )

    request.then(response => {
      this.setState({arrayCep: response.data})
    })
  }

  render(){
    console.log(this.state.arrayCep)
    return (
      <div className="App">

          <h3>Digite um CEP</h3>
          <Input type="number" value={this.state.cep} onChange={this.onChangeCep}></Input>
          <Botao onClick={this.pegarCep}>Consultar CEP</Botao>
          <hr></hr>

            {this.state.arrayCep.map(cep =>(
              <ItemCEP cep={cep}></ItemCEP>
            ))}

      </div>
    );
  }
}

export default App;
import React from 'react';
import axios from 'axios';
import Styled from 'styled-components';




function ItemCEP (props){
    console.log("item cep", props.cep)
    return(
        <div>
            <p>{props.cep.logradouro}</p>
        </div>
    )
}

export default ItemCEP;

É ISSO QUE É IMPRESSO NO LOG.

Object
cep: "08440-000"
logradouro: "Rua Porto do Bezerra"
complemento: ""
bairro: "Jardim Guaianazes"
localidade: "São Paulo"
uf: "SP"
unidade: ""
ibge: "3550308"
gia: "1004"
__proto__: Object
2 respostas
solução!

Boa tarde, Lucas! Como vai?

Como o log está mostrando, o resultado da requisição é um objeto JavaScript que está sendo armazenado no atributo arrayCep do estado do seu componente. Por isso, vc está obtendo esse erro, afinal de contas objetos JavaScript não tem o método map().

Uma forma de resolver seria fazer como abaixo.

pegarCep = () =>{
    const request = axios.get(
       `${baseURL}${this.state.cep}/json/`
    )

    request.then(response => {
      this.setState({ arrayCep: [...this.state.arrayCep, response.data] })
    })
}

Dessa forma o atributo arrayCep continuaria sendo um array, mas não sei se dentro da sua aplicação isso faria sentido.

Observação importante: Embora não seja obrigatório, é uma boa prática terminar as linhas de instruções sempre utilizando o ponto e vírgula.

Pegou a ideia? Qualquer coisa é só falar.

Grande abraço e bons estudos, meu aluno!

Obrigado pelas dicas cara. Deu certo