Javascript 为什么不是'；t我的数据正在React（NextJS）中呈现

我有以下资料：

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

constorderitems=（道具）=>{
const{Order}=props.res
返回(
{Order.map（Order=>{
if（order.OrderLines.OrderLine数组实例）{
order.OrderLines.OrderLine.map（line=>(
))
}
})}
)
}
导出默认订单项

和组件：

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

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

const OrderLineItem=（{data}）=>{
console.log（数据）
返回(
订单行项目
)
}

不会呈现任何内容，也不会将任何内容记录到控制台

---

但是，如果我这样做：

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

constorderitems=（道具）=>{
const{Order}=props.res
返回(
{Order.map（Order=>{
if（order.OrderLines.OrderLine数组实例）{
order.OrderLines.OrderLine.map（line=>console.log（line））
}
})}
)
}

---

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

您不能从

.map（）

返回这就是原因。如果，您可以使用

&&

代替

请尝试以下操作：

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

{Order.map（Order=>
order.OrderLines.OrderLine数组实例&&
order.OrderLines.OrderLine.map（line=>）
)}
在子组件中获取道具时

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

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

const OrderLineItem=（{data}）=>{
console.log（数据）
//做你想对数据做的事！
返回(
订单行项目
)
}