反应表在点击行时添加引用

Question

我当前面临以下问题：我正在开发一个React Web应用程序，该应用程序包含一个组件，用于显示产品数组状态中包含的产品。可以通过单击包含不同产品的反应表的表行来添加产品。可以通过单击同一产品多次添加该产品。

getTdProps={(state, rowInfo, column, instance) => {
              return {
                onClick: (e, handleOriginal) => {
                  that.props.handleProductSelect(rowInfo.original);
                }
              };
            }}

如果单击表行，则将调用handleProductSelect函数，该函数将原始数据作为参数传递。

handleProductSelect(oSelProduct) {
    oSelProduct["amount"] = 1;
    oSelProduct["selectedVariantOptions"] = [];
    this.setState(
      prevStates => ({
        products: [...prevStates.products, oSelProduct]
      }),
      () => {
        ...
      }
    );
  }

选定的产品将被添加到产品数组中，该组件将被重新渲染，并且产品将显示在标准html表中。

每个渲染的产品都包含一个加号和减号按钮，以更改每个产品的数量。加号按钮，例如调用handlePlusButton函数：

handlePlusButton(i) {
    this.setState(state => {
      const products = state.products.map((product, j) => {
        if (j === i) {
          product.amount = product.amount + 1;
          return product;
        } else {
          return product;
        }
      });
      return {
        products
      };
    });
  }

问题：如果我多次单击同一产品，它们将被添加到产品阵列中。现在，如果我单击加号按钮以更改金额，则添加了所有产品的金额都会有所更改。因此，某种程度上看起来像是将引用添加到产品数组。如何避免这种行为？

Answer 1

发生问题，因为您要向同一产品添加两个引用。尝试将handleProductSelect更改为此：

handleProductSelect(oSelProduct) {
    const newProduct = {
       ...oSelProduct,
       amount: 1,
       selectedVariantOptions: []
    };

    this.setState(
      prevStates => ({
        products: [...prevStates.products, newProduct]
      }),
      () => {
        ...
      }
    );
  }