React-table добавляет ссылку на щелчок по строке

В настоящее время я столкнулся со следующей проблемой: я работаю над веб-приложением для реагирования, которое содержит один компонент, отображающий продукты, содержащиеся в состоянии массива продуктов. Продукт можно добавить, щелкнув строку таблицы в таблице реакции, которая содержит различные продукты. Продукт можно добавить несколько раз, щелкнув один и тот же продукт.

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
      };
    });
  }

Проблема: если я нажму на один и тот же товар несколько раз, они будут добавлены в массив товаров. Теперь, если я нажму кнопку «плюс», чтобы изменить сумму, каким-то образом сумма будет изменена для всех продуктов, которые были добавлены. Так что как-то похоже, что в массив товаров добавлена ​​ссылка. Как я могу избежать такого поведения?


reactjs javascript react-table
person D. Mruk    schedule 05.01.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема возникает из-за того, что вы добавляете две ссылки на один и тот же продукт. Попробуйте заменить handleProductSelect на это:

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

    this.setState(
      prevStates => ({
        products: [...prevStates.products, newProduct]
      }),
      () => {
        ...
      }
    );
  }
person Mateusz Falkowski    schedule 05.01.2020