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

Question

In my application i use a search input to search values, and select input also to filter values from my data. Now my component looks like below:

 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> ); }

Now, the functionality works. If you search something, appear results, and if you try to select a value, also appears the value that you selected.
Issue : If i select from dropdown, for example: 32 , appears:

 Julia is 32 Bill is 32 Bill is 32

And now if i want to search from the list above just Julia , i type Julia in search, it search from the whole list of data, not just from the list which i get after i selected 32 .
How to solve this, and how to get the result from the last results, not to search from the whole list, but from the last result?
Note : the same issue is when i search first and after that i select a value from dropdown.

Answer 1

Your two filters always work with the same object data , and not previously filtered state data myData . Best practice save value of filters in state and each render filter data:

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

Try this one out:

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>
  );
}

Here is the codesandbox demo: Demo