Как отфильтровать массив JSON на основе выбора из таблицы начальной загрузки?

Question

Я новичок, пытающийся выучить React JS.Я загружаю список продуктов из JSON с использованием таблицы начальной реакции.Нажав кнопку сравнения, я хотел отфильтровать json на основе выбора пользователя, где «PartNumber» является уникальным полем для всех продуктов.

Может ли кто-нибудь помочь, как я могу получить отфильтрованный список "onButtonSubmit".Я могу получить номера отфильтрованных продуктов в «выбранном».Мне нужно отфильтровать массив JSON, который совпадает с номерами в выбранном.Я отформатирую результат в соответствии с моим требованием.

Ниже приведен мой код, а это мой JSON - https://jsonblob.com/412d2ac9-2f7c-11e9-9080-8bc34cc6c646

import React from 'react';
import MYResult from '../json/results.json';
import BootstrapTable from 'react-bootstrap-table-next';

class Container extends React.Component {

  state = {
    data: MYResult.Products || [],
    columns: MYResult.ParametricList_Attributes || [],
    isCompareClicked: false,
    selected: []
  };

  onButtonSubmit = (row, isSelect) => {
    this.setState({ isCompareClicked: true })
    if (isSelect) {
      this.setState(() => ({
        selected: [...this.state.selected, row.PartNumber]
      }));
    } else {
      this.setState(() => ({
        selected: this.state.selected.filter(x => x === row.PartNumber)
      }));
    }
    console.log("selectd is -- " + this.state.selected)
  }

  render() {
    var selectRowProp = {
      mode: "checkbox",
      clickToSelect: true,
      selected: this.state.selected,
      onSelect: this.onButtonSubmit
    };

    return (
      <div>
        <button onClick={this.onButtonSubmit}>Compare</button>
        <br />
        <br />
        <BootstrapTable keyField='PartNumber' selectRow={selectRowProp}
          data={this.state.data} columns={this.state.columns} />
      </div>
    );
  }

}

export default Container;

Answer 1

кажется, что вы передали одну и ту же функцию для действий onSelect и click button, но у них разные операции.Кроме того, выполните все возможные действия, чтобы избежать будущих проблем

оформить заказ в этой песочнице полный рабочий код

import React from "react";
import ReactDOM from "react-dom";
import MYResult from "../json/results.json";
import BootstrapTable from "react-bootstrap-table-next";

import "./styles.css";

class Container extends React.Component {
  state = {
    data: MYResult.Products || [],
    pristineData: MYResult.Products || [],
    columns: MYResult.ParametricList_Attributes || [],
    isCompareClicked: false,
    selected: []
  };

  onSelectClick = (row, isSelect) => {
    let modifiedRow;
    if (isSelect) {
      modifiedRow = [...this.state.selected, row.PartNumber];
    } else {
      modifiedRow = this.state.selected.filter(x => x !== row.PartNumber);
    }
    this.setState({ isCompareClicked: true, selected: modifiedRow });
  };
  onButtonClick = () => {
    const data = this.state.data;
    const selectedData = this.state.selected;
    if (selectedData.length < 2) {
      alert("atleast two data needed to compare");
      return;
    }
    let filterredData = data.filter(row =>
      selectedData.includes(row.PartNumber)
    );
    this.setState({ data: filterredData });
  };

  onSelectAll = (isSelect, rows) => {
    let newRows = isSelect ? rows.map(row => row.PartNumber) : [];
    this.setState({ selected: newRows });
  };

  onClearClick = () => {
    this.setState(state => ({ data: state.pristineData, selected: [] }));
  };

  render() {
    console.log(this.state);
    var selectRowProp = {
      mode: "checkbox",
      clickToSelect: true,
      selected: this.state.selected,
      onSelect: this.onSelectClick,
      onSelectAll: this.onSelectAll
    };

    return (
      <div>
        <button onClick={this.onButtonClick}>Compare</button>
        <button onClick={this.onClearClick}>Clear</button>
        <br />
        <br />
        <BootstrapTable
          keyField="PartNumber"
          selectRow={selectRowProp}
          data={this.state.data}
          columns={this.state.columns}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Container />, rootElement);