React Hook "useDispatch" 在 function "requestWithAction" 中被調用，它既不是 React function 組件也不是自定義 React Hook ZC1C425268E683854F14ZA7

Question

當我使用 react-redux( "react-redux": "^7.2.2" ) 從服務器獲取數據后分散操作時，如下所示：

import axios from 'axios';
import store from "../store";
import { getArticle } from "../action/ArticleAction";
import { useDispatch } from 'react-redux';


export function requestWithAction(config, action) {
  const dispatch = useDispatch();
  return axios(config).then(
    response => {
      const data = response.data.result;
      dispatch({ type: 'SUBMIT_DECISION' , payload: 1});
      //dispatch(action(data));
    }
  ).catch(
    error => {
      console.error(error);
    }
  );
}

顯示如下錯誤：

Failed to compile
src/common/XHRClient.js
  Line 20:20:  React Hook "useDispatch" is called in function "requestWithAction" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

是否可以在 http 響應 function 中分散注意力？ 如果我想在 http 響應后疏遠，我該怎么辦？

Answer 1

這里有幾個選項：

1. 您可以將您的調度（來自一個反應組件）傳遞到這個 function 並調用它。

2. 由於您在此處導入了商店，因此您可以刪除 const dispatch = useDispatch()，並使用 store.dispatch({ type: 'SUBMIT_DECISION', payload: 1})