DEV Community

Discussion on: Fetch returns an array, but javascript doesn't recognise fields.

 
itssimondev profile image
Simone Aronica

Ok so you're saying that since it's memorized as reference I could copy the array - not the reference - generated by the .json() into a new variable and then use setList to insert the reference of the new object into the state, instead of directly setting it?

Thread Thread
 
chico1992 profile image
chico1992

Yes you should always pass a new state to the set state and not mutate it i guess your useing a method somewhere that mutates the array stored in your state
Since hooks are based on functional principels you should be very careful with mutating your state
Const doesn’t prevent mutating an array or an object

Thread Thread
 
itssimondev profile image
Simone Aronica

Okay, new tests led to this:
Now when I console.log([...res]) the array shows both of the fields, but then when I setList([...res]); console.log(list) it shows only the first value... I have no idea of the reason.
I've created a pastebin with the whole code: pastebin.com/AAkyJusJ
Also this is the image of what my console is now:
Don't mind those errors as they're not about the code itself, but they're generated by react-md-components.

Thread Thread
 
chico1992 profile image
chico1992

the error is the following line since splice muatest the array
splice doc
const elem = list.splice(i, i + 1)[0];

btw you should run your fetch logic in a useEffect since it's a side effect

Thread Thread
 
daniel13rady profile image
Daniel Brady

Ah! There's your problem on line 56:

const elem = list.splice(i, i + 1)[0];

The splice method is a mutator: it changes what's in your list state!

Here's the doc for details, but basically you need to use a different approach for extracting the element you want there.

I think slice should work:
developer.mozilla.org/en-US/docs/W...

Thread Thread
 
chico1992 profile image
chico1992 • Edited

or even
const elem = list[i]
if I'm not mistaken

Thread Thread
 
daniel13rady profile image
Daniel Brady • Edited

Yeah definitely! 👏

Thread Thread
 
itssimondev profile image
Simone Aronica

Oh God I though I was using .slice... All this trouble for a p.. I can't believe it.

Thanks to both of you, you were life saver, I would have probably rewritten the entire code to find this.