按类别过滤 JSON 结果 - React Hooks

Question

说明

创建一个允许用户使用的 Web 界面：

根据特定条件过滤玩家列表。这些是您将根据测试数据创建的搜索过滤器：

年龄：允许用户过滤特定年龄或年龄范围内的玩家（例如 7、5-9、15-17 等）

性别：允许用户根据指定的性别过滤玩家

状态：允许用户根据他们所在的状态从可用的测试数据中过滤玩家

状态：允许用户根据玩家的状态（活跃/不活跃）过滤玩家

您可以应用多个过滤器来缩小搜索结果的范围。

编辑任何玩家的信息。

代码

我正在尝试使用 React Hooks，只是想弄清楚我在做什么。

1) 我想知道每个变量的初始状态是否有意义。另外，在 useEffect 方法上，只需要运行一次就可以使用 axios 获取数据，这就是所有需要的正确方法吗？

2) 只需要 4 个单独的函数来处理每个条件。我是否只需要通过对象数组map 和filter 想要的结果？

import React, { useEffect, useState } from 'react';
import axios from 'axios';


const App = () => {

const url = "https://dii-test.s3.amazonaws.com/players.json";

const [age, setAge]         = useState([]);
const [gender, setGender]   = useState([]);
const [state, setState]     = useState('');
const [status, setStatus]   = useState(false);

useEffect(() => {
  axios.get(url).then(json => setAge(json.data))
}, []);

const renderTable = () => {
  return age.map(user => {
    return (
      <tr>
       <td>{user.age}</td>
      </tr>
     )
    })
}

 return (
  <div className="App">
    <tbody>{renderTable()}</tbody>
  </div>
 );
}



export default App;

Answer 1

我有一个状态对象供玩家使用，然后另一个（或多个）用于跟踪过滤器。比如：

  const [genderFilter, setGenderFilter] = useState(null)
  const [players, setPlayers] = useState([])

然后您可以一举过滤它们 - 可以在 player 数组的 filter 内进行一系列测试，如果您发现链接更具可读性和性能，则可以在一系列 filters 中进行：

  return (
    <table>
      <tbody>
        {players.map(player => {
          // After all the filters are run, map the players to table rows
          return (
            <tr>
              <td>{player.name}</td>
              <td>{player.age}</td>
              <td>{player.state}</td>
              <td>{player.gender}</td>
              <td>{player.status}</td>
            </tr>
          )
        }).filter(player => {
          // genderFilter can be "male", "female", or null
          return genderFilter ? player.gender === genderFilter : true
        }).filter(player => {
          // ageFilter is an object with min & max
          return player.age >= ageFilter.min && player.age <= ageFilter.max
        }).filter(player => {
          // stateFilter can be a string or null
          return stateFilter ? player.state == stateFilter : true
        }).filter(player => {
          // statusFilter can be "active" or "inactive"
          return statusFilter === player.status
        })}
      </tbody>
    </table>
  )

这是快速、肮脏和丑陋的版本，只是为了展示逻辑。如果过滤器最终移除所有玩家、在 axios 调用期间为用户等待/加载消息等，它显然不包括任何显示/消息。

这也仅适用于中小型数据集 - 如果您必须在客户端下载和过滤数千个结果，它会很慢，并且您的用户会更好地将数据发送到服务器查询并仅返回适当的结果。