如何修复“作为值支柱传递给上下文提供程序的对象更改每个呈现”--考虑使用useMemo错误？

Question

我是新来的反应钩子和下一个js。我得到了这个错误。我不知道如何在这个场景中使用useMemo。有人能帮我吗？这是我的密码-

import { useEffect, useState, useMemo } from "react";
import { useRouter } from "next/router";
import { ThemeProvider } from "next-themes";
import { ContextProvider } from "src/context/context";
import { ModeContext } from "src/context/ModeContext";

const MyApp = ({ Component, pageProps }) => {
    const [kycState, setkycState] = useState("unverified");
    const [kybState, setkybState] = useState("unverified");
    const router = useRouter();

    return (
        <ContextProvider>
            <ModeContext.Provider
                **value={{ kycState, setkycState, kybState, setkybState }}**
            >
                <ThemeProvider defaultTheme="dark">
                    <Component {...pageProps} />
                </ThemeProvider>
            </ModeContext.Provider>
        </ContextProvider>
    );
};

export default MyApp;

Answer 1

两个对象在javaScript中永远不会相等，除非它们指向相同的地址。

​

const a = {  a : 1 };
const b = {  b : 2 };

const obj1 = { a , b };
const obj2 = { a , b };
console.log(obj1 === obj2);

​

每次{{ kycState, setkycState, kybState, setkybState }}都是一个新的对象。

你可以回忆录其价值：

const MyApp = ({ Component, pageProps }) => {
    const [kycState, setkycState] = useState("unverified");
    const [kybState, setkybState] = useState("unverified");
    const router = useRouter();

    const obj = useMemo(() => ({
       kycState,kybState,setkybState,setkycState
   }),[kycState,kybState,setkybState,setkycState]);

    return (
        <ContextProvider>
            <ModeContext.Provider
                **value={{ kycState, setkycState, kybState, setkybState }}**
            >
                <ThemeProvider defaultTheme="dark">
                    <Component {...pageProps} />
                </ThemeProvider>
            </ModeContext.Provider>
        </ContextProvider>
    );
};

现在，只有在依赖项发生变化时才重新创建对象。