在反应中，搜索不能像期望那样工作

Question

在我的应用程序中，我使用搜索输入来搜索值，选择输入也是为了从我的数据中过滤值。现在我的组件看起来像下面的样子。

export default function App() {
  const [myData, setMydata] = useState([]);
  const searchData = e => {
    const v = e.target.value;
    const res= data.filter(i =>
      i.name.toLowerCase().includes(v.toLowerCase())
    );
    setMydata(res);
  };
  function handleChange(value) {
    const res= data.filter(i => i.age === Number(value));
    setMydata(res);
  }

  return (
    <div className="App">
      <Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
        <Option value="2">2</Option>
        <Option value="32">32</Option>
      </Select>
      <input onChange={searchData} />
      <h1>Data</h1>
      {myData.map((i, k) => (
        <div key={k}>
          {i.name} is <span>{i.age}</span>
        </div>
      ))}
    </div>
  );
}

现在，功能工作了。如果你搜索某个东西，就会出现结果，如果你试图选择一个值，也会出现你选择的值。问题: 如果我从下拉菜单中选择，例如。32会出现 ，。

Julia is 32
Bill is 32
Bill is 32

现在，如果我想从上面的列表中搜索，只需。Julia我在搜索中输入Julia，它从整个数据列表中搜索，而不是仅仅从我选择后得到的列表中搜索。32. 如何解决这个问题，如何从最后的结果中获取结果，不是从整个列表中搜索，而是从最后的结果中搜索？注意事项问题：同样的问题是当我先搜索，然后从下拉菜单中选择一个值。

Answer 1

你的两个过滤器总是用同一个对象工作 data，而不是之前过滤的状态数据 myData. 最好的做法是在状态和每个渲染过滤器数据保存过滤器的值。

export default function App() {
    const [age, setAge] = useState('');
    const [name, setName] = useState('');

    const filteredData = data
        .filter(i => Boolean(age) ? i.age === Number(age) : true)
        .filter(i => i.name.toLowerCase().includes(name.toLowerCase()));

    return (
        <div className="App">
            <Select value={age} style={{ width: 120 }} onChange={setAge}>
                <Option value="2">2</Option>
                <Option value="32">32</Option>
            </Select>
            <input value={name} onChange={e => setName(e.target.value)} />
            <h1>Data</h1>
            {filteredData.map((i, k) => (
                <div key={k}>
                    {i.name} is <span>{i.age}</span>
                </div>
            ))}
        </div>
    );
}

Answer 2

试试这个。

import React, { useState } from "react";

export default function App() {
  const data = [
    { age: 2, name: 'John' },
    { age: 32,name: 'Mark' },
    { age: 22,name: 'Dell' },
    { age: 14,name: 'Linda' },
    { age: 16,name: 'Jon' },
    { age: 18,name: 'Ron' }
  ];
  const [myData, setMydata] = useState([]);
  const searchData = e => {
    const v = e.target.value;
    const res = data.filter(i =>
      i.name.toLowerCase().includes(v.toLowerCase())
    );
    setMydata(res);
  };
  function handleChange(value) {
    const res = data.filter(i => i.age === Number(value.target.value));
    console.log("This is the value and respos", value.target.value);
    setMydata(res);
  }

  return (
    <div>
      <select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
        <option value="2">2</option>
        <option value="32">32</option>
      </select>

      <input onChange={searchData} />
      <h1>Data</h1>
      {myData.map((i, k) => (
        <div key={k}>
          {i.name} is <span>{i.age}</span>
        </div>
      ))}
    </div>
  );
}

这里是codesandbox的演示。演示