1

Olá, estou estudando React JS tentando fazer uma aplicação com a API do CEP. Entretanto, vi que o JSON do mesmo é um objeto e não possui um array, logo, não estou conseguindo realizar o map (está dando "...map is not a function") para imprimir as informações no navegador.

{
 "cep": "20260-080",
 "logradouro": "Rua Joaquim Palhares",
 "complemento": "até 392/393",
 "bairro": "Estácio",
 "localidade": "Rio de Janeiro",
 "uf": "RJ",
 "unidade": "",
 "ibge": "3304557",
 "gia": ""
}

Eu tentei resolver com um Array.from() antes do map e um JSON.parse() no fetch, mas sem sucesso.

class App extends Component {

constructor(props) {
 super(props)

 this.state = {
   result: null,
   searchTerm: '',
}

 this.onSearchChange = this.onSearchChange.bind(this)
 this.onSearchSubmit = this.onSearchSubmit.bind(this)
}

fetchSearchTopStories(searchTerm) {
 fetch(`https://viacep.com.br/ws/${searchTerm}/json/`)
 .then(res => res.json())
 .then(result => this.setState({result}))
 .catch(err => err);
}

onSearchChange(e) {
 this.setState({ searchTerm: e.target.value });
}

onSearchSubmit(e) {
 const { searchTerm } = this.state;

 this.fetchSearchTopStories(searchTerm)

 e.preventDefault()
}

componentDidMount(){
 const { searchTerm } = this.state;

 this.fetchSearchTopStories(searchTerm)
}

render(){

 const {result, searchTerm} = this.state

 return (
  <>
   <form onSubmit={this.onSearchSubmit}>
    <input type='text' value={searchTerm} onChange={this.onSearchChange}/>
    <button type='submit'>Clique</button>
   </form>
   {result?
     <div>
       {result.map((item, index) =>
         <span key={index}>
           <p>{item.logradouro}</p>
           <p>{item.bairro}</p>
           <p>{item.localidade}</p>
         </span>
       )}
     </div>
    :null}
   </>
  );
 }
}

Ficaria muito grato com alguma ajuda para resolver esse problema.

2
  • 1
    Não entendi, a API deveria retornar um array? Se ela retorna um objeto mesmo, não faz sentido usar o map, pois é apenas um elemento que será listado, você pode acessar as propriedades diretamente (o key seria sempre 0). Commented 10/09/2019 às 17:18
  • Agora que eu me toquei nisso, eu estava na cabeça que tudo que fosse impresso no navegador teria que passar no map. Muito obrigado! Commented 10/09/2019 às 19:15

1 Resposta 1

0

Você pode acessar o valor do seu objeto pelas chaves dele:

fetchSearchTopStories(searchTerm) {
 fetch(`https://viacep.com.br/ws/${searchTerm}/json/`)
 //irá printar o valor do seu cep no console
 .then(result => console.log(result.cep))
 .catch(err => err);
}

Espero ter ajudado amigo.

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 .