map function 未在反应 jsx 中呈现

Question

我是新来的反应，并试图在 jsx 中使用 map function 来呈现数组。 然而，循环内没有渲染任何内容。

我将数据传递给我的子组件，如下所示：

                            {showMaterialConfirmModal && (
                            <MaterialModalConfirm
                              closeModal={setshowMaterialConfirmModal}
                              orderList={orderListE}
                              itemList={itemListE}
                              errorList={errorListE}
                              title="Success"
                            />
                          )}

在子组件内部，我像这样调用 map function：

              <Card>
              <GridContainer>
                <GridItem xs={12}>Design Successful for: 0</GridItem>
                <h5>Order:{props.orderList[0]}</h5>
                {props.orderList.map((order, i) => {
                  <div>
                    {order}
                    <h1>Hi</h1>
                    {/* <GridItem xs={12}>
                      order/item no {order[i]}/{props.itemList[i]} due to{" "}
                      {props.errorList[i]}
                    </GridItem> */}
                  </div>;
                })}
              </GridContainer>
            </Card>

orderList 中的数据来自标签，但是在循环内没有打印任何内容。

我检查了各种文件来运行 map function 但是我不知道为什么什么都没有打印出来。

请帮忙

Answer 1

我认为您在这里缺少return ：

{props.orderList.map((order, i) => {
    return (
      <div>
        {order}
        <h1>Hi</h1>
      </div>);
  })}

或者

{props.orderList.map((order, i) => (
      <div>
        {order}
        <h1>Hi</h1>
      </div>
  ))
}