javascript - react-table 在行单击上添加引用

Question

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

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]
      }),
      () => {
        ...
      }
    );
  }