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

【问题标题】：Why Isn't My Data Being Rendered in React(NextJS)为什么我的数据没有在 React(NextJS) 中呈现
【发布时间】：2020-10-01 13:29:44
【问题描述】：

我有以下几点：

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

还有组件：

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

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

没有渲染任何内容，也没有任何内容记录到控制台。

但是如果我这样做：

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>
  )
}

我想要的数据被记录到控制台。请问如何渲染或传递行中的数据？

【问题讨论】：

标签： javascript reactjs jsx next.js

【解决方案1】：

你没有从.map()回来，这就是原因。您可以使用&& 代替if。

请尝试以下操作：

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

【讨论】：

【解决方案2】：

在获取子组件中的道具时

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

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

【讨论】：