为什么我的数据没有在 React(NextJS) 中呈现

Question

I have the following:

const OrderItems = (props) => {
  const { Order } = props.res

  return (
    <div>
      {Order.map(order => {
        if (order.OrderLines.OrderLine instanceof Array) {
          order.OrderLines.OrderLine.map(line => (
            <OrderLineItem data={line} />
          ))
        }
      })}
    </div>
  )
}

export default OrderItems

And the component:

const OrderLineItem = ({data}) => {
  console.log(data)

  return (
    <div>Order Line Item</div>
  )
}

Nothing is rendered and nothing is logged to the console.

---

However if I do:

const OrderItems = (props) => {
  const { Order } = props.res

  return (
    <div>
      {Order.map(order => {
        if (order.OrderLines.OrderLine instanceof Array) {
          order.OrderLines.OrderLine.map(line => console.log(line))
        }
      })}
    </div>
  )
}

The data I want is logged to the console. How can I render or pass the data from line please?

Answer 1

You don't return from .map() that's the reason. You can use && instead of if .

Try as the following instead:

{Order.map(order => 
   order.OrderLines.OrderLine instanceof Array &&
      order.OrderLines.OrderLine.map(line => <OrderLineItem data={line} />)
)}

Answer 2

While getting the props in the child component

const OrderLineItem = ({ data }) => {
  console.log(data)
  // DO WHAT YOU WANT TO DO WITH THE DATA!

  return (
    <div>Order Line Item</div>
  )
}