Question

0

58

Vistas

useEffect is not getting called

Please anyone help me. Thanks in advance.

while working, I got stuck on a problem. My useEffect is not getting called. I have changed dependencies several times, but in vain.

Here is my code:

import React, { useEffect } from 'react'
import { Card, Col, Image, ListGroup, Row } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import { Link, useParams } from 'react-router-dom'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { getOrderDetails } from '../redux/actions/orderActions'

function OrderPage() {

    const { id } = useParams()
    const dispatch = useDispatch()

    const orderDetails = useSelector(state => state.orderDetails)
    const { order, error, loading } = orderDetails

    debugger
    useEffect(() => {
        if (!order || order._id !== Number(id)) {
            dispatch(getOrderDetails(id))
        }
    }, [order, dispatch, id, orderDetails])
    
    if (!loading && !error) {
       order.itemsPrice = order.orderItems.reduce((acc, item) => acc + item.price * item.qty, 0).toFixed(2)
   }

Here, my useEffect is not triggering first, rather it goes to check inside if condition and throwing error. It seems peculiar to me as I have put condition !loading & !error. It should not check inside if until I get order from redux store.

Please someone help me. Thanks again.

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T00:29:47.757Z

useEffect will always run the first time after the first render and then the other time it will run if any of the dependencies get changed

So you would need to have the below code for useEffect

    useEffect(() => {
    if (!order) {
        dispatch(getOrderDetails(id))
    } else if ( order._id !== Number(id) ) {
       dispatch(getOrderDetails(id))
    }
}, [order, dispatch, id, orderDetails])

This will check if the order is not there then get the order, or if the order is there but the order id does match with the id we get from the URL then also fetch the order.