ReactJS 多重过滤

Question

我这里有一个数据列表：

const Information = [
  {
    "id": 1,
    "name":"Samule",
    "age":25,
    "keywords": ["USA","England"]
  },
  {
    "id": 2,
    "name":"Sam",
    "age":19,
    "keywords": ["Ghana"]
  },
  {
    "id": 3,
    "name":"Mark",
    "age":17,
    "keywords": ["Africa","England"]
  },
  {
    "id": 4,
    "name":"Markus",
    "age":21,
    "keywords": ["Africa","England"]
  },
  {
    "id": 5,
    "name":"Markus",
    "age":29,
    "keywords": ["Africa","Nigeria"]
  }
];

export default Information;

reactjs 代码在这里：

import React, { useState, useEffect } from "react";

import Information from './info-json'

export default function App() {
  const [searchTerm, setSearchTerm] = useState("Ghana");
  const [searchResults, setSearchResults] = useState([]);

  const [searchTermTwo, setSearchTermTwo] = useState("Ghana");
  const [searchResultsTwo, setSearchResultsTwo] = useState([]);

  const handleChange = e => setSearchTerm(e.target.value);
  const handleChangeTwo = e => setSearchTermTwo(e.target.value);

  useEffect(() => {
    const results = Information.filter(data => data.keywords.includes(searchTerm));

    setSearchResults(results);

  }, [searchTerm]);

  useEffect(() => {
    const resultsTwo = Information.filter(data => data.name.includes(searchTermTwo));

    setSearchResultsTwo(results);

  }, [searchTermTwo]);

  return (
    <div className="App">
      <input
        type="text"
        value={searchTerm}
        onChange={handleChange}
        placeholder="search"
      />
      <p>Search by Keyword</p>
      <p>
        searchTerm:
        <br />
        {searchTerm}
      </p>

      <input
        type="text"
        value={searchTermTwo}
        onChange={handleChangeTwo}
        placeholder="search"
      />
      <p>Search by Name</p>
      <p>
        search name:
        <br />
        {searchTermTwo}
      </p>


      <div className="available-data">
        <h1>Available Data</h1>
        <p>"id": 1,
    "name":"Samule",
    "age":25,
    "keywords": ["USA","England"]</p>

    <p>
    "id": 2,
    "name":"Sam",
    "age":19,
    "keywords": ["Ghana"]
    </p>

    <p>
    "id": 3,
    "name":"Mark",
    "age":17,
    "keywords": ["Africa","England"]
    </p>

    <p>
    "id": 4,
    "name":"Markus",
    "age":21,
    "keywords": ["Africa","England"]
    </p>

    <p>
    "id": 5,
    "name":"Markus",
    "age":29,
    "keywords": ["Africa","Nigeria"]
    </p>
      </div>

      <div className="results">
      <h1>Results</h1>
         <ul>
          {searchResults &&
            searchResultsTwo.map(item => <ul key={item.id} style={{border: "2px solid black", margin: "5px"}}>
              <li>{item.name}</li>
              <li>{item.age}</li>
            </ul>)}
        </ul>
      </div>
    </div>
  );
}

我想要做的是过滤多个值 - 一个用例是，如果我只是在名称字段中输入 Markus，那么 ID 4 和 5 会显示，但如果我在第一个字段中输入 Markus 并在 Nigeris 中输入第二个则只有 ID 5 会显示。

然后我还想按年龄过滤。

提前致谢。

Answer 1

我建议将过滤器对象（属性和相应的输入）存储在您的状态中，而不是（在渲染时）检查每个对象其各自的属性是否包含所需的输入（或输入为空）。

以下是一个快速的现场演示，它可能会为您提供有关如何解决问题的线索。不过，我不建议在您的生产应用程序中按原样部署它。

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const data = [{"id":1,"name":"Samule","age":25,"keywords":["USA","England"]},{"id":2,"name":"Sam","age":19,"keywords":["Ghana"]},{"id":3,"name":"Mark","age":17,"keywords":["Africa","England"]},{"id":4,"name":"Markus","age":21,"keywords":["Africa","England"]},{"id":5,"name":"Markus","age":29,"keywords":["Africa","Nigeria"]}]

const App = () => {
  const [filterObj, setFilterObj] = useState({name:'', age:'', keywords:''}),
        onFilter = ({target:{name, value}}) => 
          setFilterObj({...filterObj, [name]: value})
  return (
    <div>
      <label>Name</label>
      <input name="name" value={filterObj.name} onChange={onFilter} />
      <label>Keywords</label>
      <input name="keywords" value={filterObj.keywords} onChange={onFilter} />
      <label>Age</label>
      <input type="number" name="age" value={filterObj.age} onChange={onFilter} />
      <ul>
        {
          data.map(({id, name, age, keywords}) => {
            const match = (name.toLowerCase().includes(filterObj.name.toLowerCase()) || !filterObj.name) &&
                    (`${age}`.includes(filterObj.age) || !filterObj.age) &&
                    (keywords.some(w => w.toLowerCase().includes(filterObj.keywords.toLowerCase())) || !filterObj.keywords)
             return match && <li key={id}>{name}, {age} ({keywords.join(', ')})</li>
          })
        }
      </ul>
    </div>
  )
}

render (
  <App />,
  rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>