javascript - 显示来自 REST API 的用户列表并使用 React 进行过滤

Question

我是新来的，也是 React js 的新手，我在解决 1 个练习时遇到问题，该练习要求显示来自 REST API 的用户列表，然后才能对其进行过滤。

我已经设法展示了它，但我不知道如何进行过滤。

编辑:

好吧，谢谢，我设法像你说的那样使用过滤器 :D。

但现在我希望用户能够选择显示哪些列，哪些不显示。

为此，我创建了一个选择，我打算从中删除过滤器，但我真的不知道如何继续:/

这就是我使用文本输入进行过滤的方式。

//Query
  const [query, setQuery] = useState("");

  const search = (data) => {
    return data.filter(
      item => item.name.toLowerCase().includes(query));
  }

选择

<select className='select' onChange={changeFilter}>
        <option value="">All</option>
        <option value="name">Name</option>
        <option value="username">Username</option>
        <option value="email">Email</option>
        <option value="phone">Phone</option>
      </select>

所以基本上我假装改变了 “名称”在这里:item.name.toLowerCase().includes(query)); 用于过滤器，如果选择了全部，则显示全部。

有什么帮助吗？

获取的代码:

// users from API.
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetchData();
  }, []);






  // async function
  const fetchData = async () => {
    await fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch((error) => {
        console.log("ERROR:" + error);
      })
  }

我修改了在App.js中调用组件的方式

  <div className="App">
      <h1>PRUEBA DE NIVEL</h1>

      <select className='select' onChange={changeSelectedFilter}>
        <option value="">All</option>
        <option value="name">Name</option>
        <option value="username">Username</option>
        <option value="email">Email</option>
        <option value="phone">Phone</option>
      </select>

      <input type="text"
        placeholder='Search...'
        className='search'
        onChange={e => setQuery(e.target.value.toLowerCase())}
      />
      <UserTable data={search(users)} filter={selectedFilter} />

    </div>

Answer 1

您可以使用 filter像这样的方法:

const isUserEligible = (user) => {
  if(/* the condition that the user must have */) {
    return true;
  } else {
    return false;
  }
}

users.filter((user) => isUserEligible(user)).map((user) => (
  <UsersList
    key={user.id}
    name={user.name}
    username={user.username}
    email={user.email}
    phone={user.phone}
  />
))

更新:

我没有完全理解你的问题。 但是如果您只想在选择框中显示选定的列，您可以像这样为您的选择定义一个状态:

const [selectedColumn, setSelectedColumn] = useState("");
const changeSelectedColumn = (event) => {
  setSelectedColumn(event.target.value);
}

<select className='select' onChange={changeSelectedColumn}>
  <option value="">All</option>
  <option value="name">Name</option>
  <option value="username">Username</option>
  <option value="email">Email</option>
  <option value="phone">Phone</option>
</select>

然后您可以像这样将 selectedColumn 传递给您的 UsersList 组件:

users.map((user) => (
  <UsersList
    key={user.id}
    name={user.name}
    username={user.username}
    email={user.email}
    phone={user.phone}
    selectedColumn={selectedColumn}
  />
))

最后在您的 UsersList 组件中，根据 selectedColumn 的值仅显示通过“if, else”选择的列，或者如果 selectedColumn 值为“”则显示全部。 (意味着用户选择了所有列)。

如果你也想通过query进行过滤，你可以像我之前说的那样再次使用filter方法。