如何在按钮单击 Reactjs 上增加项目？答案

【问题标题】：How to increment item on button click Reactjs?如何在按钮单击 Reactjs 上增加项目？
【发布时间】：2020-09-11 08:29:55
【问题描述】：

我正在开发一个演示购物应用程序。我有一个购物车组件，它从本地存储中获取购物车物品并在表格中显示这些物品。我为用户提供了两个按钮，用于在购物车中添加和删除商品。当用户将商品添加到购物车时，它会在本地存储中更新，但不会反映在表格上显示的数量，只有在再次呈现页面时才会更新数量。 解决此问题的最佳做法是什么？

下面是用 Cart.js 编写的代码

   render() {
    const cartItems = JSON.parse(localStorage.getItem("cart"));
    console.log(cartItems)
    if (cartItems) {
      return (
          <div>
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Image</th>
              <th>Product Name</th>
              <th>Price per unit</th>
              <th>Quantity</th>
              <th>Total price</th>
            </tr>
          </thead>
          <tbody>
            {cartItems.map((item) => (
              <tr key={item.id}>
                <td>
                  <Image src={item.image} height="100px" width="auto"></Image>{" "}
                </td>
                <td>{item.name}</td>
                <td><i className="fa fa-inr"></i> {item.price}</td>
                <td>
                  {item.qty}
                  <br>
                  </br>
                  <button onClick={() => this.addToCart(item)} >
                  <i className="fa fa-plus"></i> 
                </button>
                  <button><i className="fa fa-minus"></i> </button>
                </td>
                <td>
                 <i className="fa fa-inr"></i> {item.qty * item.price}
                </td>
              </tr>
            ))}

          </tbody>
        </Table>
        </div>
      );
    } else {
      return (
        <div align="center">
          <h1>Add Items to your Cart ! ^_^ </h1>
          <br></br>
          <Button onClick={this.routeChange}>Go to Dashboard ! </Button>
        </div>
      );
    }
  }

【问题讨论】：

addToCart 函数是什么样的？我认为你的问题是状态没有被更新。
您可以创建状态变量 cartItems 并更新状态并将其设置在本地存储中。
我没有保存任何东西。我正在使用本地存储。
有问题。 React 需要知道某些内容已更新以触发重新渲染；这是（通常）通过状态完成的。
为什么要使用本地存储？

标签： javascript reactjs redux local-storage

【解决方案1】：

你可以试试这样的

 handleSubtractQuantity = (id)=>{
    this.props.subtractQuantity(id);
    this.forceUpdate()
}

【讨论】：

【解决方案2】：

是的，您可以看到相同的状态变量，如下所示：

 this.state = {
          cartItems: []
        };

    addItem(item){
    this.setState({
      cartItems: [...this.state.cartItems, item]
    })

【讨论】：

【解决方案3】：

    export default function Cart {
    const [cartItems, setCartItems] = useState([]);

    const handleAddition = (item) => {
        if (!cartItems.includes(item)) {
            setCartItems([...cartItems, item]);
         }
    }

    render() {
     return ( 
     cartItems && (
          <div>
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Image</th>
              <th>Product Name</th>
              <th>Price per unit</th>
              <th>Quantity</th>
              <th>Total price</th>
            </tr>
          </thead>
          <tbody>
            {cartItems.map((item) => (
              <tr key={item.id}>
                <td>
                  <Image src={item.image} height="100px" width="auto"></Image>{" "}
                </td>
                <td>{item.name}</td>
                <td><i className="fa fa-inr"></i> {item.price}</td>
                <td>
                  {item.qty}
                  <br>
                  </br>
                  <button onClick={() => this.addToCart(item)} >
                  <i className="fa fa-plus"></i> 
                </button>
                  <button><i className="fa fa-minus"></i> </button>
                </td>
                <td>
                 <i className="fa fa-inr"></i> {item.qty * item.price}
                </td>
              </tr>
            ))}

          </tbody>
        </Table>
        </div>
      );
    }
)
       <div align="center">
          <h1>Add Items to your Cart ! ^_^ </h1>
           <br></br>
           <Button onClick={this.routeChange}>Go to Dashboard ! </Button>
       </div>
      );
    }
  }
}

【讨论】：