时间戳

首页 > 解决方案 > 在 ReactJS 的表格行中显示数组数据

javascript - 在 ReactJS 的表格行中显示数组数据

问题描述

我怎样才能productName在里面输出return呢？来自选定items的购物车项目。( function) 确实显示在控制台中，但我无法让它显示在渲染的返回中。const order

const mapState = ({ user }) => ({
  currentUser: user.currentUser,
});

const mapCartItems = createStructuredSelector({
  items: selectCartItems,
});

const CheckingOut = (product) => {
  const { total, cartCount, items } = useSelector(mapCartItems);
    const order = {
    orderItems: items.map((item) => {
      const { productName, qty} = item;
      return {
        productName,
      };
      console.log(item.productName); // this one is showing in the console
    }),
  };

  return (
    <div>
      <Container fixed>
          <table >
            <tr>
              <td>Name : </td> // like show the items here
              <td></td>
            </tr>
            <br></br>
            <tr>
              <td>
                <PaymentIcon
                  style={{ marginRight: "1rem", color: " #e31837" }}
                />
                Total Price:
              </td>
              <td>₱{total}.00</td>
            </tr>
          </table>
        //just other codes for submit 
      </Container>
    </div>
  );
};

export default CheckingOut;

标签： javascriptreactjs

解决方案

const order = (product) => {
  const order = {
    orderItems: items.map((item) => {
      const { productName, qty} = item;
      return {
        productName,
      };
    }),
  };

  order.orderItems.forEach((item) => console.log(item.productName)) // will log all productName
return order.orderItems
}

函数order将返回order.orderItems具有对象数组的函数。例如：

order :{
  orderItems: [
    {
      productName: 'car',
    },
    {
      productName: 'bike',
    }
  ]
}

要访问每个产品名称，您必须遍历嵌套在order.orderItems

order(product).forEach((item) => {
  console.log(item.productName) // car, bike
});

推荐阅读