反应上下文超出最大更新深度 api

Question

我的项目中有三个主题，我想用 React Context 处理主题切换过程 API，但我收到“超出最大更新深度”错误。我该如何处理？

这是我的数据层：

import React from "react";

// Data Layer
export const StateContext = React.createContext();

// Provider
export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={React.useReducer(reducer, initialState)}>
     {children}
  </StateContext.Provider>
);

export const useStateValue = () => React.useContext(StateContext);

这是我的减速器：

export const initialState = {
  theme: "",
};

export const reducer = (state, action) => {
  if (action.type === "SET_THEME") {
    return {
            ...state,
            theme: action.userTheme,
    };
    } else {
            return state;
    }
 };

这里是index.js:

import { StateProvider } from "./context/StateProvider";
import { initialState, reducer } from "./context/reducer";

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
    </StateProvider>
 </React.StrictMode>,
 document.getElementById("root")
 );

用户在导航栏组件内切换主题，这是我的导航栏：

import { useStateValue } from "../context/StateProvider";

export const Nav = () => {
   const [state, dispatch] = useStateValue();

   const setTheme = (theme) => {
      dispatch({
        type: "SET_THEME",
        userTheme: theme,
      });
    };

    return (
       <>
          <div onClick={setTheme("theme-orange")}>
             <a id="orange" href="javascript:void(0)">
               orange
             </a>
          </div>

          <div onClick={setTheme("theme-green")}>
             <a id="green" href="javascript:void(0)">
               green
             </a>
          </div>

          <div onClick={setTheme("theme-blue")}>
             <a id="blue" href="javascript:void(0)">
               blue
             </a>
          </div>
       </>
    )
}

最后是 App.js:

import { useStateValue } from "./context/StateProvider";

function App() {
   const [{ theme }] = useStateValue();

   return (
       <div className={theme}> // Theme applied from context
           <Nav />
           <Home />
           <About />
           <Portfolio />
           <Contact />
       </div>
    );
}

Answer 1

您正在对 Nav 组件的渲染执行 setState。尝试：

<div onClick={() => setTheme("theme-orange")}>
  <a id="orange" href="javascript:void(0)">
    orange
  </a>
</div>

反应上下文超出最大更新深度 api

Maximum update depth exceeded with react context api

reactjs

react-context