如何在 REACT 中过滤简单的表/数组

Question

我正在寻找一种轻松过滤并可能对下表进行排序的方法。我尝试用

过滤它

      {data.getInteressentListing.edges.filter(node.name => node.name.includes('J')).map(({node}) => (

但这没有用。我也需要像搜索栏这样的东西，不仅过滤名称。它应该同时过滤所有列。也许你可以给我一些建议或一个简单的解决方案。

提前致谢

丹尼尔

这是我的工作简单表的代码

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import Table from 'react-bootstrap/Table'

export const GET_POSTS = gql`
query   {
  getInteressentListing {
    edges {
      node {
        id
        Name
        Vorname
        Quelle
        Artikel
        Land
        Ort
        Tel
        Mobil
        EMail
        URL
        Whatsapp
        Telegram
        Notizen
        Geschlecht
      }
    }
  }
}
`;


const rowStyles = (post, canEdit) => canEdit(post)
  ? { cursor: 'pointer', }
  : {};

const PostViewer = ({ canEdit, onEdit }) => (
  <Query query={GET_POSTS}>
    {({ loading, data }) => !loading && (
      <Table >
        <thead>
          <tr>
            <th>Name</th>
            <th>Vorname</th>
            <th>Land</th>
            <th>Ort</th>
            <th>Tel.</th>
            <th>Mobil</th>
            <th>E-Mail</th>
            <th>Geschlecht</th>
          </tr>
        </thead>
        <tbody>
          {data.getInteressentListing.edges.map(({node}) => (
            <tr
              key={node.id}
              style={rowStyles(node, canEdit)}
              onClick={() => canEdit(node) && onEdit(node)}
            >
    <td> {node.Name} </td>
    <td> {node.Vorname} </td>
    <td> {node.Land} </td>
    <td> {node.Ort} </td>
    <td> {node.Tel} </td>
    <td> {node.Mobil} </td>
    <td> {node.EMail} </td>
    <td> {node.Geschlecht} </td>
             
            </tr>
          ))}
        </tbody>
      </Table>
    )}
  </Query>
);
PostViewer.defaultProps = {
  canEdit: () => true,
  onEdit: () => null,
};

export default PostViewer;

这是我取回数据时的格式。它里面有节点：

{
  "data": {
    "getInteressentListing": {
      "edges": [
        {
          "node": {
            "id": "1294",
            "Name": "Felix",
            "Vorname": "Hase",
            "Quelle": "Facebook",
            "Artikel": "Briefe",
            "Land": "Deutschland",
            "Ort": "KiKaLand",
            "Tel": "+49 0256/659552",
            "Mobil": "01525659565",
            "EMail": "felix@kika.de",
            "URL": "www.felixderhase.de",
            "Whatsapp": true,
            "Telegram": false,
            "Notizen": "Läuft im Fernsehen",
            "Geschlecht": "Divers"
          }
        },
        {
          "node": {
            "id": "1295",
            "Name": "Daniel",
            "Vorname": "Morgner",
            "Quelle": "eBay-Kleinanzeigen",
            "Artikel": "Omega",
            "Land": "Deutschland",
            "Ort": "Musterort",
            "Tel": "045692582",
            "Mobil": "015412,0",
            "EMail": "asdasd@web.de",
            "URL": "www.daniel.de",
            "Whatsapp": false,
            "Telegram": true,
            "Notizen": "asdasd",
            "Geschlecht": "Männlich"
          }
        },
        {
          "node": {
            "id": "1296",
            "Name": "Muster",
            "Vorname": "Max",
            "Quelle": "eBay-Kleinanzeigen",
            "Artikel": "Musterartikel",
            "Land": "Musterland",
            "Ort": "Musterort",
            "Tel": "+49255225488",
            "Mobil": "+49536256",
            "EMail": "Max@mustermann.de",
            "URL": "www.mustermann.org",
            "Whatsapp": true,
            "Telegram": null,
            "Notizen": "Hat viele Muster",
            "Geschlecht": "Männlich"
          }
        },
        {
          "node": {
            "id": "1297",
            "Name": "",
            "Vorname": "Peter",
            "Quelle": null,
            "Artikel": "Steine",
            "Land": "Deutschland",
            "Ort": "Musterort",
            "Tel": "07228562345",
            "Mobil": "01525654654654",
            "EMail": "peter-pan@web.de",
            "URL": "peter-walter.de",
            "Whatsapp": null,
            "Telegram": null,
            "Notizen": "Verkauft Steine",
            "Geschlecht": "Männlich"
          }
        },
        {
          "node": {
            "id": "1298",
            "Name": "Jakob",
            "Vorname": "Hund",
            "Quelle": null,
            "Artikel": "Hundefutter",
            "Land": "Traumland",
            "Ort": "Bagdad",
            "Tel": "0152519188723",
            "Mobil": "025105153",
            "EMail": "jakob@web.de",
            "URL": null,
            "Whatsapp": null,
            "Telegram": true,
            "Notizen": "Ist ein Hund",
            "Geschlecht": "Männlich"
          }
        }
      ]
    }
  }
}

我在查询中请求数据，请参阅上面的代码

Answer 1

第 1 步：我尝试使用状态中的模拟数据

this.state = {
  getInteressentListing: [
    {
      id: 1,
      Name: "Daniel",
      Vorname: "Daniel",
      Land: "Germany",
      Ort: "Deutschland",
      Tel: "9342423434",
      Mobil: "893434343434",
      EMail: "Daniel@gmail.com",
      Geschlecht: "Male"
    },
    {
      id: 2,
      Name: "Morgner",
      Vorname: "Morgner",
      Land: "Germany",
      Ort: "Denmark",
      Tel: "92323232344",
      Mobil: "942343434344",
      EMail: "Morgner@gmail.com",
      Geschlecht: "Male"
    },
    {
      id: 3,
      Name: "Jeba",
      Vorname: "Jeba",
      Land: "India",
      Ort: "Chennai",
      Tel: "8777788232323",
      Mobil: "923232323233",
      EMail: "jeba@gmail.com",
      Geschlecht: "Male"
    }
  ],
  selectedFilter: "id",
  filterByText: ""
};

第2步：输入更改输入以设置state

inputChange = (event) => {
  const { name, value } = event.target;
  this.setState({ [name]: value });
};

第 3 步：在 render 方法中编写如下过滤器函数

const filteredList = this.state.getInteressentListing.filter((item) => {
  if (this.state.selectedFilter && this.state.filterByText) {
    if (this.state.selectedFilter === "id") {
      return (
        item[this.state.selectedFilter] &&
        item[this.state.selectedFilter].toString() ===
          this.state.filterByText.toString()
      );
    } else {
      return (
        item[this.state.selectedFilter] &&
        item[this.state.selectedFilter]
          .toLowerCase()
          .includes(this.state.filterByText.toLowerCase())
      );
    }
  } else {
    return item;
  }
});

第 4 步：最后html 模板将在如下渲染方法中，

<div className="App">
    <select
      name="selectedFilter"
      onChange={this.inputChange}
      value={this.state.selectedFilter}
    >
      <option disabled value="" required>
        Search by
      </option>
      <option value="id">Id</option>
      <option value="Name">Name</option>
      <option value="Vorname">Vorname</option>
      <option value="Land">Land</option>
      <option value="Ort">Ort</option>
      <option value="Tel">Tel</option>
      <option value="Mobile">Mobile</option>
      <option value="EMail">EMail</option>
      <option value="Geschlecht">Geschlecht</option>
    </select>
    <input
      value={this.state.filterByText}
      name="filterByText"
      onChange={(e) => {
        this.inputChange(e);
      }}
      placeholder="Type here..."
    />
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Vorname</th>
          <th>Land</th>
          <th>Ort</th>
          <th>Tel.</th>
          <th>Mobil</th>
          <th>E-Mail</th>
          <th>Geschlecht</th>
        </tr>
      </thead>
      <tbody>
        {filteredList.map((node) => (
          <tr key={node.id}>
            <td> {node.Name} </td>
            <td> {node.Vorname} </td>
            <td> {node.Land} </td>
            <td> {node.Ort} </td>
            <td> {node.Tel} </td>
            <td> {node.Mobil} </td>
            <td> {node.EMail} </td>
            <td> {node.Geschlecht} </td>
          </tr>
        ))}
        {filteredList.length === 0 && (
          <tr>
            <td colSpan="8" style={{ textAlign: "center" }}>
              No Record Found
            </td>
          </tr>
        )}
      </tbody>
    </table>
  </div>

DEMO