useContext 钩子中的值正在更改，但组件未重新渲染

Question

这是我的上下文组件：

import React, { useState } from "react";

const FilterContext = React.createContext({
  filters: {},
  check: () => {},
  cleanState: () => {},
});

export const FilterContextProvider = (props) => {
  const [filters, setFilters] = useState({
    man: false,
    woman: false,
  });

  const checkAndRedirectHandler = (indetificator) => {
    if (indetificator === "womanClicked") {
      setFilters({
        man: false,
        woman: true,
      });
    } else if (indetificator === "manClicked") {
      setFilters({
        man: true,
        woman: false,
      });
    } 
  };
  const cleanState = () => {
    setFilters({
      man: false,
      woman: false,
    });
  };

  return (
    <FilterContext.Provider
      value={{
        filters: filters,
        check: checkAndRedirectHandler,
        cleanState: cleanState,
      }}
    >
      {props.children}
    </FilterContext.Provider>
  );
};

export default FilterContext;

在其中一个组件中，我正在更改我的过滤器状态（例如，woman 为 true）。状态正确更新。 在另一个组件中，我使用上下文中的状态，但即使它更改了该组件也不会重新渲染。这是该组件的代码：

import React, { useEffect, useState, useContext } from "react";

import "../../../styles/css/bootstrap.css";
import "../../../styles/css/responsive.css";
import "../../../styles/css/ui.css";
import axios from "axios";
import { NavLink } from "react-router-dom";
import url from "../../../shared/Server";
import FilterContext from "../../../store/filter-context";

const GenderMenu = () => {
  const [genderCollapse, setGenderCollapse] = useState(false);
  const [categories, setCategories] = useState();
  const filterData = useContext(FilterContext);

  const [genders, setGenders] = useState([
    { name: "woman", isChecked: filterData.filters.woman },
    { name: "man", isChecked: filterData.filters.man },
    { name: "unisex", isChecked: false },
  ]);

  const onCheckItem = (name) => {
    genders.forEach((el) => {
      if (el.name === name) {
        return (el.isChecked = !el.isChecked);
      }
    });

    setGenders([...genders]);
  };
  useEffect(() => {
    console.log(filterData);

    axios
      .get(`${url}/api/v1/get-glasses-gender`)
      .then((response) => {
        setCategories(response.data);
        // setGenders([
        //   { name: "woman", isChecked: filterData.filters.woman },
        //   { name: "man", isChecked: filterData.filters.man },
        //   { name: "unisex", isChecked: false },
        // ]);
      })
      .catch((err) => {
        console.log(err);
      });
    return () => {
      setCategories({});
      filterData.cleanState();
    };
  }, []);

  let renderCategories;
  if (Array.isArray(categories) && categories) {
    renderCategories = categories.map((cat, i) => (
      <div key={cat.glasses_gender_id}>
        <label className="custom-control custom-checkbox">
          <input
            type="checkbox"
            checked={genders[i].isChecked}
            onChange={() => {
              onCheckItem(genders[i].name);
            }}
            id={`gender${cat.glasses_gender_id}`}
            value={cat.glasses_gender_id}
            className="custom-control-input"
          />
          <div className="custom-control-label">
            {cat.glasses_gender.name}
            <strong className="badge badge-pill badge-light float-right">
              {cat.total}
            </strong>
          </div>
        </label>
      </div>
    ));
  } else {
    renderCategories = <p>Loading...</p>;
  }

  return (
    <article className="filter-group" style={{ minWidth: "100%" }}>
      <h6 className="title">
        <NavLink
          to="/filter"
          className="dropdown-toggle"
          onClick={() => setGenderCollapse(!genderCollapse)}
        >
          Pol
        </NavLink>
      </h6>
      <div
        id="filter_gender"
        className={
          genderCollapse
            ? "filter-content collapse"
            : "filter-content collapse show"
        }
      >
        <div className="inner">{renderCategories}</div>
      </div>
    </article>
  );
};

export default GenderMenu;

在 FilterData 中，const 上下文已存储并且正在发生变化，但为什么后面没有重新渲染？