REACT 显示来自 REST API 和过滤器的用户列表答案

【问题标题】：REACT Display a list of users from a REST API and filterREACT 显示来自 REST API 和过滤器的用户列表
【发布时间】：2022-11-18 04:05:57
【问题描述】：

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

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

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

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

【问题讨论】：

如果数据获取正常，映射UsersList时，您可以在链中添加一个过滤器作为users.filter().map()。但是您想如何过滤它？
^ 例如：您是否需要一个下拉列表来按一种特定的属性类型过滤数据？当你弄清楚你应该让那个组件更新一个单独的状态，然后在 filter 的条件下使用它来生成一个可以呈现的新数据数组。

标签： javascript reactjs

【解决方案1】：

.filter MDN

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

【讨论】：

【解决方案2】：

例如，您可以使用名为 filterInput 的状态以及 input 和 filter()。像这样：

const [users, setUsers] = useState([]);
const [filterInput, setFilterInput] = useState("");

<div>
  <input type="text" value={filterInput} onChange={() => setFilterInput(e.target.value)} />
  {users
    .filter((user) => user.name.includes(filterInput) || user.username.includes(filterInput))
    .map((user) => (
      <UsersList
        key={user.id}
        name={user.name}
        username={user.username}
        email={user.email}
        phone={user.phone}
      />
    ))}
</div>;

【讨论】：