Error trying to access an object property in an React component

Asked

Viewed 316 times

3

I’m having a problem accessing information from an array that has an object inside, using React.

This is the function that brings my json and changes the state of the application, it creates a times.name, times.players and times.photo, in case this will turn into an array of objects

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

Here I pass it to my app-content

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

In it, I re-dress my component

<TimeCasa times= {times} />

So far so good, but there in my component

const TimeCasa = ({times}) => {

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

times[0] finds the object normally and I assign it to the variable pos, within this variable I called pos.name and it from the error saying that it is not possible to access Undefined name, pos being not Undefined, it is an object that contains the key name. Does anyone know what it can be?

javascript react
  • 1

    What is the return of console.log(pos)?

  • 1

    Smooth running here: https://codesandbox.io/s/p7yvo599qm

  • The return of the console.log(pos) is: {name: "Time A", players: Array(5), photos: Array(5)}

  • 1

    Dude, tell you what, put one on {pos && pos.nome} inside H1, see if it goes

  • It worked!! Can you explain why? Just to explain something to you, if I tried to put only {pos} inside H1, it gave error because I was trying to put an object like Child, until then blz, it’s supposed to be wrong, but if I didn’t close the page, back in the code and put in the.name and let the hot Load update, it worked, when I gave F5 stop again... doing it your way worked!

  • The surrender of the Timecasa was being called before the ajax ended, one should take this kind of care.

  • I understood perfectly, how could I hold the surrender until the ajax is finished? and just to learn why with {pos && pos.name} it waits for ajax to end? I don’t understand the difference

  • I wrote a more complete answer, in case I helped solve your problem, please mark it as correct. =)

  • Thank you very much, you helped me a lot!

Show 4 more comments

1 answer

1


According to the question shown, the code seems to work normally when tested in a sandbox.

This may be due to timing problems, where the Component render TimeCasa is being called before the state times be filled in.

This is a fairly common problem when dealing with asynchronous methods or which do not have an immediate response.

A good way to fix this is by using Short Circuit Evaluation, or Conditional Rendering.

You could just check if the value of pos(whereas it has a reference of the first array value times) is a value truthy:

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

If you don’t understand very well, I recommend reading this answer and the link I left above about conditional Rendering.

How could I hold the surrender until the ajax is finished?

Before the surrender is called, the method componentWillMount is called, you can do the operations inside, but even so it is not certain that they will be finished before the render is called, even it is not very recommended to use it, see here the why.

A way that would guarantee would return nothing in the yield if the value of times not yet filled, but I also do not recommend that do this, maybe show a loading is better.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.