Javascript 使用ReactJS在Material UI的表体中使用.map函数时编译错误

我在处理对象数组时有点卡住了，所以基本上我希望在React中使用MaterialUI创建动态表，但是我在

遇到了一个错误，因为

期望一个赋值或函数调用，而不是看到一个表达式没有未使用的表达式

不确定为什么会发生这种情况，因为我试图制作一个简单的表体，我正在遍历数组中的每个对象并显示它，任何建议

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

函数篮（{basketItems，updatedbarket}）{
控制台日志（篮子项目）；
返回(
品名
项目编号。
库存水平
数量
{basketItems.map（（eachproduct）=>{
让productName=eachproduct.product\u名称；
让producNumber=eachproduct.producNumber；
让价格=每个产品的价格；
设desc=eachproduct.productDescription；
让photo=eachproduct.image\u URL；
设stockQuantity=eachproduct.stockQuantity；
//错误是指向此位置
{" "}
{" "}
{productName}
{productName}
;
})}
);
}

basketItem

是如下所示的对象数组，当前有两个，但可以是更多的对象

---

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

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

{basketItems.map（（每个产品）=>{
让productName=eachproduct.product\u名称；
让producNumber=eachproduct.producNumber；
让价格=每个产品的价格；
设desc=eachproduct.productDescription；
让photo=eachproduct.image\u URL；
设stockQuantity=eachproduct.stockQuantity；
返回(
{" "}
//错误是指向此位置
{" "}
{" "}
{productName}
{productName}
);
})}

您是否尝试返回表格？正如在

return（…）

感谢Karani，它现在可以工作了。为了理解.map函数之后的这个return（）语句，如果我们已经在顶部使用了ign return来呈现内部的所有内容，那么为什么我们需要这个return呢。抱歉，可能是个愚蠢的问题，但我只是想理解，因为我是一个新的反应者。当您在jsx中使用{}时。你可以在{}中编写一些javascript，所以，当你在vanillaJs中使用map时，你应该返回一些东西。在这种情况下也是一样的