重置筛选按钮需点击两次才更新UI的问题求助

大家好，我碰到了一个让人头疼的小问题：我的页面上有Apply Filters和Reset Filters两个按钮，点击Apply Filters的时候，筛选条件能立刻在UI上生效，数据也会同步更新；但点击Reset Filters按钮时，得连续点两次才能让筛选重置，第一次点击完全没反应。

我把相关的React组件代码贴在下面，麻烦各位帮忙看看问题出在哪儿，感激不尽！

import { useState, useEffect } from 'react';
import { getBusinesses } from '../api/DBRequests';
import categories from '../constants/categories';

const BusinessListPage = () => {
  const [businesses, setBusinesses] = useState([]);
  const [filters, setFilters] = useState({
    category: '',
    state: '',
    minPrice: '',
    maxPrice: '',
    minRevenue: '',
    maxRevenue: '',
  });
  const [sortBy, setSortBy] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchBusinesses();
  }, []);

  const fetchBusinesses = async () => {
    setLoading(true);
    try {
      const adjustedSortBy =
        sortBy === 'asc' ? 'asc' : sortBy === 'desc' ? 'desc' : '';
      const businesses = await getBusinesses(adjustedSortBy, filters);
      setBusinesses(businesses);
    } catch (error) {
      console.error('Error fetching businesses:', error.message);
    } finally {
      setLoading(false);
    }
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFilters((prevFilters) => ({ ...prevFilters, [name]: value }));
  };

  const handleResetFilters = () => {
    setFilters({
      category: '',
      state: '',
      minPrice: '',
      maxPrice: '',
      minRevenue: '',
      maxRevenue: '',
    });
    setSortBy('');
    fetchBusinesses();
  };

  return (
    <div className="container-fluid mt-4">
      <div className="row">
        <div className="col-md-3">
          <div className="bg-light border p-3">
            <h5>Filters</h5>
            <div className="mb-3">
              <label htmlFor="category" className="form-label">
                Category
              </label>
              <select
                id="category"
                name="category"
                className="form-control"
                value={filters.category}
                onChange={handleInputChange}
              >
                <option value="">All Categories</option>
                {categories.map((category, index) => (
                  <option key={index} value={category}>
                    {category}
                  </option>
                ))}
              </select>
            </div>
            <button
              className="btn btn-primary btn-block"
              onClick={fetchBusinesses}
            >
              Apply Filters
            </button>
            <button
              className="btn btn-secondary btn-block mt-2"
              onClick={handleResetFilters}
            >
              Reset Filters
            </button>
          </div>
        </div>

        {/* Businesses List Section */}
        <div className="col-md-9">
          {loading && <p className="d-block mx-auto">Loading</p>}
          <div className="row">
            {businesses.length === 0 && !loading && (
              <div className="col-12">
                <p className="mt-4 text-center">No businesses found.</p>
              </div>
            )}
            {businesses.map((business) => (
              <div className="col-md-4 mb-4" key={business._id}>
                <div className="card h-100">
                  <div className="card-body">
                    <h5 className="card-title">{business.name}</h5>
                  </div>
                  <div className="card-footer">
                    <a
                      href={`/business/${business._id}`}
                      className="btn btn-primary btn-sm btn-block"
                    >
                      View Details
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default BusinessListPage;

备注：内容来源于stack exchange，提问作者in43sh