React with easy-peasy

Question

My route:

  const id = req.params.id
  const event = await events.findByPk(id, {
    include: [clubs]
  })
  return res.json(event)
})

Result in Postman:

{
    "id": 12,
    "title": "Title",
    "description": "Short description",
    "clubId": 1,
    "club": {
        "id": 1,
        "clubname": "My Club"
    }
}

On my page I'm getting data using useEffect calling my action and updating "currentEvent" in state:

const currentEvent = useStoreState(state => state.currentEvent)
const fetchEventById = useStoreActions(actions => actions.fetchEventById)
const { id } = useParams()

useEffect(() => {
   fetchEventById(id)

}, [])

Destructuring data:

  const { title, description, club } = currentEvent

This is working well, and state is updated:

<h1>{title}</h1>

This is not working at all. State will not be updated and the Console says "Cannot read properties of undefined (reading 'clubname')":

<h1>{title}</h1>
<h2>{club.clubname}</h2>

Any ideas?

Answer 1

I think you should wait data fetched correctly and then you can see your updated.

Please refactore your code by using ? like this club?.clubname