时间戳

首页 > 解决方案 > 使用 ReactJS 在 Material-UI 的 TableBody 中使用 .map 函数时出现编译错误

javascript - 使用 ReactJS 在 Material-UI 的 TableBody 中使用 .map 函数时出现编译错误

问题描述

我在处理一组对象时有点卡住了，所以基本上我希望在 React 中使用 MaterialUI 制作动态表，但是当我尝试制作一个简单<TableRow key={producNumber}>的Expected an assignment or function call and instead saw an expression no-unused-expressionsTableBody 和因为我正在遍历数组中的每个对象并显示它，任何建议的家伙。

function Basket({ basketItems, updatedBasket }) {
 console.log(basketItems);

 return (
    <div className="BasketProducts">
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell> </TableCell>
              <TableCell>Product Name </TableCell>
              <TableCell> Item No.</TableCell>
              <TableCell> StockLevel</TableCell>
              <TableCell> Quantitiy</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {basketItems.map((eachproduct) => {    
              let productName = eachproduct.product_name;
              let producNumber = eachproduct.producNumber;
              let price = eachproduct.price;
              let desc = eachproduct.productDescription;
              let photo = eachproduct.image_URL;
              let stockQuantity = eachproduct.stockQuantity;

              <TableRow key={producNumber}>    // the error is point to this position
                <TableCell>
                  {" "}
                  <img className="BasketProducts-image" src={photo} />{" "}
                </TableCell>
                <TableCell>{productName}</TableCell>
                <TableCell>{productName}</TableCell>
              </TableRow>;
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

basketItem对象数组如下，目前有两个，但可以是更多 对象在此处输入图像描述

标签： javascriptreactjsmaterial-ui

解决方案

您没有在地图功能中返回任何内容。所以试试这个

{basketItems.map((eachproduct) => {
                          let productName = eachproduct.product_name;
                          let producNumber = eachproduct.producNumber;
                          let price = eachproduct.price;
                          let desc = eachproduct.productDescription;
                          let photo = eachproduct.image_URL;
                          let stockQuantity = eachproduct.stockQuantity;
                          return (
                            <TableRow key={producNumber}>
                              {" "}
                              // the error is point to this position
                              <TableCell>
                                {" "}
                                <img
                                  className="BasketProducts-image"
                                  src={photo}
                                />{" "}
                              </TableCell>
                              <TableCell>{productName}</TableCell>
                              <TableCell>{productName}</TableCell>
                            </TableRow>
                          );
                        })}

推荐阅读