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

大佬教程收集整理的这篇文章主要介绍了useContext 钩子中的值正在更改，但组件未重新渲染，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决useContext 钩子中的值正在更改，但组件未重新渲染？

开发过程中遇到useContext 钩子中的值正在更改，但组件未重新渲染的问题如何解决？下面主要结合日常开发的经验，给出你关于useContext 钩子中的值正在更改，但组件未重新渲染的解决方法建议，希望对你解决useContext 钩子中的值正在更改，但组件未重新渲染有所启发或帮助；

这是我的上下文组件：

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,});
    } 
  };
  const cleanState = () => {
    setFilters({
      man: 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",//   { name: "man",//   { name: "unisex",// ]);
      })
      .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 上下文已存储并且正在发生变化，但为什么后面没有重新渲染？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

大佬总结

以上是大佬教程为你收集整理的useContext 钩子中的值正在更改，但组件未重新渲染全部内容，希望文章能够帮你解决useContext 钩子中的值正在更改，但组件未重新渲染所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。