如何使用useState和useEffect过滤数据

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

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [filteredUsers, setFilteredUsers] = useState([]);
  const [ageFilter, setAgeFilter] = useState('');

  // 模拟从 API 获取用户数据
  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://api.example.com/users');
      const data = await response.json();
      setUsers(data);
    };

    fetchUsers();
  }, []);

  // 根据年龄过滤用户数据
  useEffect(() => {
    if (ageFilter) {
      const filtered = users.filter(user => user.age >= ageFilter);
      setFilteredUsers(filtered);
    } else {
      setFilteredUsers(users);
    }
  }, [users, ageFilter]);

  return (
    <div>
      <input
        type="number"
        placeholder="Enter minimum age"
        value={ageFilter}
        onChange={e => setAgeFilter(parseInt(e.target.value))}
      />
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>{user.name} - {user.age}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;