Skip to main content
Commonmark migration
Fonte Link

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?

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.

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.

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.

removeu 41 caracteres do conteúdo
Fonte Link
Francisco
  • 7,6mil
  • 4
  • 28
  • 58

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? (perguntado nos comentários da pergunta)

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.

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? (perguntado nos comentários da pergunta)

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.

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.

Fonte Link
Francisco
  • 7,6mil
  • 4
  • 28
  • 58

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? (perguntado nos comentários da pergunta)

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.