Фильтр не применяется при изменении входного текста: ReactJS

Question

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

Помощь будет оценена.

https://codesandbox.io/s/happy-hooks-tblde

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "semantic-ui-react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      filteredData: [],
      columns: [],
      searchInput: ""
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Visits",
        accessor: "visits"
      }
    ];
    this.setState({ columns });
  };

  getData = () => {
    let data = [
      { firstName: "aaaaa", status: "Pending", visits: 155 },
      { firstName: "aabFaa", status: "Pending", visits: 155 },
      { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
      { firstName: "aAaaaa", status: "Approved", visits: 175 },
      { firstName: "adaSaaa", status: "Cancelled", visits: 165 },
      { firstName: "aasaaa", status: "Cancelled", visits: 157 },
      { firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
      { firstName: "adaAAadsdweaa", status: "Approved", visits: 17585 },
      { firstName: "aAaaaa", status: "Approved", visits: 175 },
      { firstName: "adadsdSaaa", status: "Cancelled", visits: 165 }
    ];
    this.setState({ data });
  };

  handleChange = event => {
    this.setState({ searchInput: event.target.value }, () => {
      this.globalSearch();
    });
  };

  globalSearch = () => {
    let { data, searchInput } = this.state;
    let filteredData = data.filter(value => {
      return (
        value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.visits
          .toString()
          .toLowerCase()
          .includes(searchInput.toLowerCase())
      );
    });
    this.setState({ filteredData });
  };

  render() {
    let { data, columns, searchInput, filteredData } = this.state;
    return (
      <div>
        <Input
          size="large"
          name="searchInput"
          value={searchInput || ""}
          onChange={this.handleChange}
          label="Search"
        />
        <ReactTable
          data={filteredData.length > 0 && filteredData ? filteredData : data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
      </div>
    );
  }
}

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

Answer 1

здесь при вашем втором заходе на посадку возникает ошибка handleSetData = data =>{this.setState({data});}; вы меняете состояние данных в зависимости от данных фильтра, поэтому ваши данные исчезают, и вам нужно передать установку состояния фильтра данных следующим образом:

handleSetData = data => {this.setState({ filteredData: data });};

и в ReactTable вам нужно отрендерить FilterData или data следующим образом:

data={this.state.filteredData ? this.state.filteredData : data}

import React from "react";
import ReactDOM from "react-dom";
import GlobalSearchComponent from "./GlobalSearchComponent";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      filteredData: null,
      columns: [],
      searchInput: ""
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName",
        sortable: false,
        show: true,
        displayValue: " First Name"
      },
      {
        Header: "Status",
        accessor: "status",
        sortable: false,
        show: true,
        displayValue: "Status "
      },
      {
        Header: "Visits",
        accessor: "visits",
        sortable: false,
        show: true,
        displayValue: " Visits "
      }
    ];
    this.setState({ columns });
  };

  getData = () => {
    let data = [
      { firstName: "aaaaa", status: "Pending", visits: 155 },
      { firstName: "aabFaa", status: "Pending", visits: 155 },
      { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
      { firstName: "aAaaaa", status: "Approved", visits: 175 },
      { firstName: "adaSaaa", status: "Cancelled", visits: 165 },
      { firstName: "aasaaa", status: "Cancelled", visits: 157 },
      { firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
      { firstName: "adaAAadsdweaa", status: "Approved", visits: 17585 },
      { firstName: "aAaaaa", status: "Approved", visits: 175 },
      { firstName: "adadsdSaaa", status: "Cancelled", visits: 165 },
      { firstName: "dsdcdaaaaa", status: "Cancelled", visits: 157 },
      { firstName: "aaadvsaa", status: "Submitted", visits: 5153 },
      { firstName: "aaaaswea", status: "Pending", visits: 1555 },
      { firstName: "aaaaauwe", status: "Submitted", visits: 155 }
    ];
    this.setState({ data });
  };

  handleSetData = data => {
    this.setState({ filteredData: data });
  };

  render() {
    let { data, columns } = this.state;
    return (
      <div>
        <GlobalSearchComponent
          data={this.state.data}
          handleSetData={this.handleSetData}
        />
        <ReactTable
          data={this.state.filteredData ? this.state.filteredData : data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
      </div>
    );
  }
}

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

Answer 2

хорошо, ошибка здесь data={(filteredData.length > 0 && filteredData) ? filteredData: data}, поэтому здесь, если FilterData имеет длину 0, он вернет массив данных! так что я сделал, это проверить, что вход имеет некоторое значение:

  (filteredData.length > 0 && filteredData) || searchInput? filteredData: data

если вход имеет значение, он возвращает фильтрованные данные, которые пусты!

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "semantic-ui-react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      filteredData: [],
      columns: [],
      searchInput: ""
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Visits",
        accessor: "visits"
      }
    ];
    this.setState({ columns });
  };

  getData = () => {
    let data = [
      { firstName: "aaaaa", status: "Pending", visits: 155 },
      { firstName: "aabFaa", status: "Pending", visits: 155 },
      { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
      { firstName: "aAaaaa", status: "Approved", visits: 175 },
      { firstName: "adaSaaa", status: "Cancelled", visits: 165 },
      { firstName: "aasaaa", status: "Cancelled", visits: 157 },
      { firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
      { firstName: "adaAAadsdweaa", status: "Approved", visits: 17585 },
      { firstName: "aAaaaa", status: "Approved", visits: 175 },
      { firstName: "adadsdSaaa", status: "Cancelled", visits: 165 }
    ];
    this.setState({ data });
  };

  handleChange = event => {
    this.setState({ searchInput: event.target.value }, () => {
      this.globalSearch();
    });
  };

  globalSearch = () => {
    let { data, searchInput } = this.state;
    let filteredData = data.filter(value => {
      return (
        value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.visits
          .toString()
          .toLowerCase()
          .includes(searchInput.toLowerCase())
      );
    });
    this.setState({ filteredData: filteredData });
  };

  render() {
    let { data, columns, searchInput, filteredData } = this.state;
    return (
      <div>
        <Input
          size="large"
          name="searchInput"
          value={searchInput || ""}
          onChange={this.handleChange}
          label="Search"
        />
        <ReactTable
          data={
            (filteredData.length > 0 && filteredData) || searchInput
              ? filteredData
              : data
          }
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);