在 useEffect 中使用 React Context Dispatch 時出現無限循環

Question

我正在處理一個項目並創建了一個應該存儲我的項目數據的上下文。 我將上下文調度包含在一個組件中的 useEffect 中，該組件應該將數據 object 傳遞給上下文，但我遇到了一個問題，我是一個無限循環。 我完全簡化了結構，但我仍然無法弄清楚我的問題是什么。 我粘貼了下面的代碼。 有誰知道我可能做錯了什么？

// DataContext.js
import React, { useReducer } from "react";

export const DataContext = React.createContext();

const dataContextInitialState = { test: 1 };

const dataContextReducer = (state, action) => {
  switch (action.type) {
    case "update":
      console.log(state);
      return {
        ...state,
        action.value,
      };

    default:
      return dataContextInitialState;
  }
};

export const DataContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(
    dataContextReducer,
    dataContextInitialState
  );

  return (
    <DataContext.Provider
      value={{
        state,
        dispatch,
      }}
    >
      {children}
    </DataContext.Provider>
  );
};

// Component that is accessing context

    .
    .
    .
  useEffect(() => {
    dataContext.dispatch({
      type: "update",
    });
  }, [dataContext]);
    .
    .
    .

Answer 1

我認為這是因為useEffect在第一次渲染期間被調用，它執行調用你的減速器的dispatch ，它返回一個新的 object { dataContextInitialState } 。

新的對象被傳遞給你的組件， useEffect檢查dataContext object 是否與之前的渲染相同，但它不同，因為它是一個新的 object 所以它重新執行useEffect並且你有循環。

一個可能的解決方案

根據我對這段代碼的理解

const dataContextInitialState = { test: 1 };

case "update":
  return {
    dataContextInitialState,
  };

你的 state 變成這樣：

{
  dataContextInitialState: {
    test: 1
  }
}

我猜你想要的是擁有一個 state ，它是一個帶有鍵名test的 object ，你可以嘗試像這樣修改你的代碼：

case "update":
  return dataContextInitialState;