3

estou com um problema para acessar informações de um array que tem um objeto dentro, usando React.

Essa é a função que trás meu json e altera o estado da aplicação, ele cria um times.nome, times.players e times.foto, no caso isso vai virar um array de objetos

getTimes () {
    ajax().get(`./src/json/times.json`)
  .then(result => {
            this.setState({
                times: result.map((time) => ({
                    nome: time.time,
                    players: time.player,
                    fotos: time.foto
                }))
            })
        })
}

Aqui eu passo ele para meu app-content

render() {
    return <AppContent 
        times={this.state.times}
    />
}

Nele, eu renderizo meu componente

<TimeCasa times= {times} />

Até aqui tudo certo, porém lá no meu componente

const TimeCasa = ({times}) => {

let pos = times[0]
console.log(pos)
return (
<div className='wrapper-casa'>
    <h1 className="time">{pos.nome}</h1>

o times[0] encontra o objeto normalmente e eu atribui ele a variavel pos, dentro dessa variavel eu chamei o pos.nome e ele da erro dizendo que não é possivel acessar nome de undefined, sendo que pos não é undefined, ele é um objeto que contem a key nome. Alguém sabe o que pode ser?

9
  • 1
    Qual o retorno do console.log(pos)?
    – Francisco
    Commented 19/11/2018 às 23:25
  • 1
    Aqui ta funcionando suave: codesandbox.io/s/p7yvo599qm
    – Francisco
    Commented 19/11/2018 às 23:38
  • O retorno do console.log(pos) é: {nome: "Time A", players: Array(5), fotos: Array(5)} Então cara, olhei seu sandbox, meu código em teoria ta igual, muito estranho isso
    – Rodolpho
    Commented 20/11/2018 às 0:35
  • 1
    Cara, faz o seguinte, mete um {pos && pos.nome} dentro do h1, vê se vai
    – Francisco
    Commented 20/11/2018 às 0:39
  • Funcionou!! vc sabe me explicar o porque? Só pra te explicar uma coisa, se eu tentasse colocar apenas {pos} dentro do H1, ele dava erro pq eu tava tentando colocar um objeto como child, até ai blz, é pra dar erro mesmo, mas se eu não fechasse a pagina, voltasse no codigo e colocasse pos.nome e deixasse o hot reload atualizar, funcionava, quando eu dava F5 parava de novo... fazendo do seu jeito deu certo!
    – Rodolpho
    Commented 20/11/2018 às 0:51

1 Resposta 1

1

De acordo com o mostrado na pergunta, o código parece funcionar normalmente quando testado em um sandbox.

Isso pode estar ocorrendo por problemas de timing, onde o render do component TimeCasa está sendo chamando antes do estado times ser preenchido.

Isso é um problema bastante comum quando se trata com métodos assíncronos ou que não possuem uma resposta imediata.

Uma boa forma de consertar isso é utilizando do Short Circuit Evaluation, ou Conditional Rendering.

Você poderia simplesmente checar se o valor de pos(considerando que ele tem uma referência do primeiro valor do array times) é um valor truthy:

<h1 className="time">{pos && pos.nome}</h1>

Se não entendeu muito bem, recomendo ler esta resposta e o link que deixei acima sobre conditional rendering.

Como eu poderia fazer pra segurar o render até o ajax terminar?

Antes que o render seja chamado, o método componentWillMount é chamado, você pode fazer as operações la dentro, mas mesmo assim não é certo que elas serão terminadas antes que o render seja chamado, inclusive não é muito recomendado que o use, veja aqui o porque.

Uma forma que garantiria seria retornar nada no render caso o valor de times ainda não esteja preenchido, mas eu também não recomendo que faça isso, talvez mostrar um loading seja melhor.

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 .