reactjs - React - 在 useEffect 挂钩中使用 ContextAPI 中的函数缺少依赖项警告

Question

我正在使用 react Context 来存储一些全局状态和函数。但是，当我在 useEffect 挂钩内使用上下文中定义的函数时，会导致警告：“React Hook useEffect 缺少依赖项：mapContext”。

代码示例是这样的：

const mapContext= useContext(MapContext);

useEffect(()=>{
 mapContext.getAPIToken();
 mapContext.getAPICredit();
}, [])

如果我添加mapContext到依赖项数组中，它将导致无限循环，因为getAPITokenandgetAPICredit函数将更新mapContext.

我知道可以通过使用// eslint-disable-next-line react-hooks/exhaustive-deps评论来抑制警告，但是，我想知道是否有另一种方法可以真正解决这个警告？

编辑： getAPICredit() 的实现如下所示：

const getAPICredit = async () => {
    try {
      const results = await axios.get('/get_apicredit', {
        headers: { Authorization: authState.accessToken },
      });
      dispatch({
        type: GET_APICREDIT,
        payload: results.data,
      });
    } catch (err) {
      handleError(err.response);
    }
  };

编辑2

的代码片段mapContext：

 const initialState = {
    userAPI: { key: '', credit: 0 },
  };
 const [state, dispatch] = useReducer(MapReducer, initialState);
 return (
    <MapContext.Provider
      value={{
        userAPI: state.userAPI,
        getAPIToken,
        getAPICredit,
      }}
    >
      {props.children}
    </MapContext.Provider>
  );
}

export default MapState;

mapReducer片段：

case GET_APICREDIT: {
      return {
        ...state,
        userAPI: {
          ...state.userAPI,
          credit: action.payload,
        },
      };
    }

标签： reactjsreact-hookseslintreact-context