Unhandled Rejection (TypeError): Cannot read property 'map' of undefined? (React-firebase)

Question

What is wrong in what i am doing, i am getting collection snapshot, looping through it and push it to the state then use that state to render some list items but i get that error: Unhandled Rejection (TypeError): Cannot read property 'map' of undefined

Code:

const [books, setBooks] = useState([]);
db.collection('books').get()
   .then(snapshot => snapshot.forEach(doc => {
      setBooks([...books, doc.data()])
}))

return (
  books.map(return some jsx)
)

have you tried this in return books && books.map(return some jsx) ? — shubham jha
– shubham jha, Commented Sep 26, 2020 at 7:13
may be you could try with empty value like setBooks([]) in forEach and log the doc and doc.data() — shubham jha
– shubham jha, Commented Sep 26, 2020 at 7:17

Sam R. · Accepted Answer · 2020-09-26 06:50:01Z

1

You are doing too many setState. Why not simply do it once?

const [books, setBooks] = useState([]);
db.collection('books')
  .get()
  .then(snapshot => snapshot.map(s => s.data())
  .then(data => setBooks(data))
}))

return (
  books.map(b => <div>{book stuff here}</div>)
)

answered Sep 26, 2020 at 6:50

Sam R.

16.4k14 gold badges76 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Code Eagle Over a year ago

unfortunately, i get that error Unhandled Rejection (TypeError): snapshot.map is not a function The same error that pushed me to use forEach

Sam R. Over a year ago

@CodeEagle, that only means your db query is not returning an array. Log the snapshot variable and see what's in there.

Sam R. Over a year ago

@CodeEagle, this is probably what you want stackoverflow.com/a/52101894/1693859

Sam R. Over a year ago

Debug it. Put a debugger statement inside the then(snapshot => { debugger }) and look at the devtool to see what's inside of it.

Code Eagle Over a year ago

it worked finally, thank you you saved me too much rerendering!

|

Collectives™ on Stack Overflow

Unhandled Rejection (TypeError): Cannot read property 'map' of undefined? (React-firebase)

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related