如何使用useState和useEffect過濾數據

Question

我創建了一個下拉表單，它將在從 API 獲得的數據之間切換視圖。當前視圖設置為查看所有傳入隊列，但我如何過濾結果以顯示基於傳入“u_react_view”字段的隊列選擇類別（類型字符串）？ 我對鈎子還很陌生，非常感謝任何幫助，在此先感謝。

XML 所有隊列的響應：<u_react_view>all</u_react_view>

服務台隊列的 XML 響應：<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

試試這樣：

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

據我了解，您應該根據所選過濾器過濾結果。

要做到這一點，請使用下面的代碼，它將設置 state 並將值分配回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>

現在過濾結果並渲染結果列表

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