Question

我需要知道这段代码有什么区别

     {this.state.products &&
                    this.state.products.map((product, index) => (
                      <div key={index}>
                        <Subd
                          name={product.name}
                          price={product.price}
                          info={product.info}
                          image={product.image}
                          handleShow={this.showProduct}
                          handleTotal={this.calculateTotal}
                        />
                      </div>
                    ))}

并在

之类的<Sudb/>组件中循环div

this.state.products &&
        this.state.products.map((product, index) => (
      <div className="row form-group">
      <div className="col-sm-2">
        <img
          className="card-img-right flex-auto d-none d-lg-block"
          alt="Thumbnail+{index}"
          src={product.image}
        />
      </div>
      <div className="col-sm-6">
        <h4>
          {product.name}: ${product.price}
        </h4>
        <button className="btn btn-outline-primary" onClick={this.showInfo}>
          show info
        </button>
      </div>
      <div className="col-sm-4 text-right">
        qty: {this.state.qty}
        <br />
        <button className="btn btn-outline-primary" onClick={this.add}>
          {" "}
          +1{" "}
        </button>
        <button
          className="btn btn-outline-primary"
          onClick={this.subtract}
          disabled={this.state.qty < 1}
        >
          {" "}
          -1{" "}
        </button>
      </div>
    </div>`

在上述情况下，如果我更新数量，它会影响所有三个对象，但在第一种情况下，它可以正常工作。谁能解释两者之间的确切区别是什么？沙盒链接Sandbox

在第二个代码中，我直接制作了<Subd/>组件代码

Answer 1

从第二个示例提供的代码示例中可以看到的问题如下。

您对所有产品使用相同的状态。因此，当您将this.state.qty更新为一行时，它会同时更新所有它们。

当您分开它时它起作用的原因是因为每一行都有其自己的状态，可以在其中存储单个数量。

如果确实需要不分离该代码，则可以为每个数量的状态创建一个数组。并更改减法以接受一个索引，该索引可用于访问qty状态数组上的某些行qty状态。

要将参数传递给onclick，您必须将其包装到箭头函数中，这样当页面装入时它不会自动运行

onClick={() => {someFunction(param)}

循环div和使其成为独立的组件并循环之间有什么区别？

1 个答案: