使用ReactJS在物料界面表体中使用.map函数时编译错误[重复]

oiopk7p5  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(173)
    • 此问题在此处已有答案**:

map function not working in React(3个答案)
React: Expected an assignment or function call and instead saw an expression(12个答案)
十小时前关门了。
我在处理对象数组时遇到了一些问题,所以基本上我希望使用React中的MaterialUI制作动态表,但我在<TableRow key={producNumber}>遇到了一个错误,因为Expected an assignment or function call and instead saw an expression no-unused-expressions不知道为什么会发生这种情况,因为我试图制作一个简单的TableBody,而且我正在遍历数组中的每个对象并显示它,各位有什么建议吗?

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是对象数组,如下所示,当前有两个,但可以是更多对象

rqqzpn5f

rqqzpn5f1#

你没有返回任何Map功能.所以试试这个

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

相关问题