如何使用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>
    )
}