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