Блог

Технический Стек

• реагировать — 17.0.2
• реагировать-дом — 17.0.2
• Далее — 11.1.1

Контексты

userContext.js

 import React from "react";

const UserContext = React.createContext(null);

export default UserContext;
 

utilContext.js

 import React from "react";

const UtilContext = React.createContext(null);

export default UtilContext;
 

_app.js — документы

 import { useState, useEffect } from "react";
import { ChakraProvider } from "@chakra-ui/react";
import { Provider as ReduxProvider } from "react-redux";
import { useStore } from "../store";
import UserContext from "@src/context/userContext";
import UtilContext from "@src/context/utilContext";

function MyApp({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState);
  const [user, setUser] = useState(null);
  const [showNav, setShowNav] = useState(true);
  const [showToTop, setShowToTop] = useState(false);

  useEffect(() => {
    const user = getLocalStorage("user");
    if (user) {
      setUser(JSON.parse(user));
    }

    // show and hide navbar
    let prevScrollpos = window.pageYOffset;
    window.onscroll = function () {
      let currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        setShowNav(true);
      } else {
        setShowNav(false);
      }
      prevScrollpos = currentScrollPos;

      // scroll to top button
      if (
        document.body.scrollTop > 20 ||
        document.documentElement.scrollTop > 20
      ) {
        setShowToTop(true);
      } else {
        setShowNav(true);
        setShowToTop(false);
      }
    };
  }, []);


  const updateUser = (data) => {
    let localUser = getLocalStorage("user");
    if (localUser) {
      localUser = JSON.parse(localUser);
    } else {
      localUser = {};
    }

    const mergeUser = { ...localUser, ...data };
    setUser(mergeUser);
    setLocalStorage("user", JSON.stringify(mergeUser));
  };
  
  return (
    <>
      <ChakraProvider>
        <ReduxProvider store={store}>
          <UserContext.Provider value={{ data: user, setUser: updateUser }}>
            <UtilContext.Provider value={{ showNav, showToTop }}>
              <Component {...pageProps} />
            </UtilContext.Provider>
          </UserContext.Provider>
        </ReduxProvider>
      </ChakraProvider>
    </>
  );
}

export default MyApp;
 

component.js

 import UserContext from "@src/context/userContext";
const Component=()=>{
  const user = useContext(UserContext);
  const [posts, setPosts] = useState({});

  useEffect(() => {
    console.log("User changed..")
    if (!user.data?._id) return;

    setPosts({ loading: true });
    GET(`/api/post/fetch/all/by-author/${user.data._id}?private=true`)
      .then((res) => setPosts({ data: res.data, loading: false }))
      .catch((err) => setPosts({ err: true, loading: false }));
  }, [user]);
  
  // render posts which is a long list
}
 

Проблема

Вы можете видеть в _app.js файле, что я обновляю utilContext информацию о window.scroll событии. Но обновление utilContext также запускает крючок Component .

И всякий раз, когда я прокручиваю страницу, я получаю это сообщение, зарегистрированное на консоли.

Я нигде не вижу, чтобы обновление контекста обновляло остальные контексты в приложении, пожалуйста, дайте мне знать, если я делаю что-то не так. Пользователь изменился..

Пользователь изменился..

Пользователь изменился..

…