react-table 添加对行点击的引用

Question

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

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

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

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

所选产品将添加到产品数组中，组件将重新呈现，产品将以标准 html table.

显示

每个呈现的产品都包含一个加号和减号按钮来更改每个产品的数量。加号按钮，例如调用 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]
      }),
      () => {
        ...
      }
    );
  }

react-table 添加对行点击的引用

react-table adds reference on row click

javascript

reactjs

react-table