如何使用useState和useEffect过滤数据

Question

I created a drop-down form which will switch views between data obtained from an API. The current view is set to view all incoming queues, but how can I filter the results to show a selection of queues based on the incoming “u_react_view” field category (type string)? I'm fairly new to hooks and any help is appreciated, thanks in advance.

XML response for all queues: <u_react_view>all</u_react_view>

XML response for servicedesk queues: <u_react_view>all, servicedesk</u_react_view>

const App = () => {
    const [results, setResults] = useState([]) 
  
    useEffect(()=>{
      axios.get('API LINK')
        .then(res => {
          setResults(res.data.result)
        });
    },[]);
  
    const Filter = () => {
      return (
        <form className="filter">
            <select name="filter" id="filter"> 
            <option value="all">All Queues View</option>
            <option value="servicedesk">Service Desk View</option>
        </select>
        </form>
      )
    }
  
    const Results = () => {
        return (
            <>
            {
                results.map(i => (
                    <ul>
                        <li key={i.sys_id}><h1>{i.u_queues}</h1></li>
                    </ul>
                ))
            }
            </>
        )
    }
}

Answer 1

Try this way:

const App = () => {
  const [results, setResults] = useState([]) 
  const [filter, setFilter] = useState('all')
  useEffect(()=>{
    axios.get('API LINK')
      .then(res => {
        setResults(res.data.result)
      });
  },[]);

  return (
      <>
      <select onChange={(e)=> setFilter(e.target.value)}> 
          <option selected={filter === 'all'} value="all">All Queues View</option>
          <option selected={filter === 'servicedesk'} value="servicedesk">Service Desk View</option>
      </select>
      {
          results.filter(item=> {
            if(filter === 'servicedesk' && item.type !== 'servicedesk'){
              return false
            }
            return true
          }).map(i => (
              <ul>
                  <li key={i.sys_id}><h1>{i.u_queues}</h1></li>
              </ul>
          ))
      }
      </>
  )
}

Answer 2

From what I under stand you should filter the results based on the filter selected.

to do that use below code it will set the state and assign value back to select

// for storing selected filter
  const [filter, setFilter] = useState('all')


<select value={filter} onChange={(e)=> setFilter(e.target.value)}> 
    <option value="all">All Queues View</option>
    <option value="servicedesk">Service Desk View</option>
</select>

Now filter the results and render the results list

const Results = () => {
    return (
        <ul>
         {
            results.filter(result => results.u_react_view.includes(filter)).map(i => (         
               <li key={i.sys_id}><h1>{i.u_queues}</h1></li>         
            ))
        }
       </ul>
    )
}