CODEWITHSUNDEEP
reactjsmongodbexpressmdbreact
patrick_cage
patrick_cage

Reputation: 1

How do i fix items not being shown on screen from mongo db?

I'm trying to display my orders from mongo db using a List orders component but it shows the error in the image. Could this be a database problem? this is the code that lists the orders.The image above with the loader looping is where the orders should populate. But it puts that error. Where should i check?

import React, { Fragment, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { MDBDataTable } from 'mdbreact'

import Loader from '../layouts/Loader'
import MetaData from '../layouts/MetaData'

import { useAlert } from 'react-alert'
import { useDispatch, useSelector } from 'react-redux'
import { myOrders, clearErrors } from '../../actions/orderActions'

const ListOrders = () => {
  const alert = useAlert()
  const dispatch = useDispatch()

  const { loading, error, orders } = useSelector((state) => state.myOrders)

  useEffect(() => {
    dispatch(myOrders())

    if (error) {
      alert.error(error)
      dispatch(clearErrors())
    }
  }, [dispatch, alert, error])

  const setOrders = () => {
    const data = {
      columns: [
        {
          label: 'Order ID',
          field: 'id',
          sort: 'asc',
        },
        {
          label: 'Num of Items',
          field: 'numOfItems',
          sort: 'asc',
        },
        {
          label: 'Amount',
          field: 'amount',
          sort: 'asc',
        },
        {
          label: 'Status',
          field: 'status',
          sort: 'asc',
        },
        {
          label: 'Actions',
          field: 'actions',
          sort: 'asc',
        },
      ],
      rows: [],
    }

    orders.forEach((order) => {
      data.rows.push({
        id: order._id,
        numOfItems: order.orderItems.length,
        amount: `$${order.totalPrice}`,
        status:
          order.orderStatus &&
          String(order.orderStatus).includes('Delivered') ? (
            <p style={{ color: 'green' }}>{order.orderStatus}</p>
          ) : (
            <p style={{ color: 'red' }}>{order.orderStatus}</p>
          ),
        actions: (
          <Link to={`/order/${order._id}`} className='btn btn-primary'>
            <i className='fa fa-eye'></i>
          </Link>
        ),
      })
    })

    return data
  }

  return (
    <Fragment>
      <MetaData title={'My Orders'} />

      <h1 className='mt-5'>My Orders</h1>

      {loading ? (
        <Loader />
      ) : (
        <MDBDataTable
          data={setOrders()}
          className='px-3'
          bordered
          striped
          hover
        />
      )}
    </Fragment>
  )
}

export default ListOrders

[enter image description here][1]


  [1]: https://i.sstatic.net/ANOZg.png

Upvotes: 0

Views: 79

Answers (1)

Yilmaz
Yilmaz

Reputation: 49190

By the time you check orders.forEach((order) => {} orders must be default state value, must be empty array. This might be the only issue in your code

orders && orders.forEach((order) => {}

Upvotes: 0

Related Questions