如何使 HTTP 挂钩可在同一组件上重用

Question

我有一个可以像这样使用的 HTTP 钩子：

const { data, error, isLoading, executeFetch } = useHttp<IArticle[]>('news', []);

在同一个组件中，我想触发另一个 API 调用来 POST 数据并更新其中一篇文章：

const handleChange = (article: IArticle, event: React.ChangeEvent<HTMLInputElement>) => {
        executeFetch(`updateNews?id=${article.id}`, { method: 'post', data: { isRead: event.target.checked }});
    };

    return (
        <>
            <div className={classes.articleListHeader}>
                <h1>Article List</h1>
                <small className={classes.headerSubtitle}>{data.length} Articles</small>
            </div>
            <ul>
                {data.map(article => <Article key={article.id} article={article} handleChange={handleChange}/>)}
            </ul>
        </>
    )

我用来获取数据的自定义钩子：

export function useHttp<T>(initUrl: string, initData: T): UseHttp<T> {
    const initOptions: AxiosRequestConfig = { url: initUrl };

    const [options, setOptions] = useState(initOptions);

    const useHttpReducer = createHttpReducer<T>();
    const [state, dispatch] = useReducer(useHttpReducer, {
        isLoading: false,
        error: '',
        data: initData
    });

    useEffect(() => {
        let cancelRequest = false;

        const fetchData = async (cancelRequest: boolean = false) => {
            if (!options.url) return;

            dispatch({ type: API_REQUEST});
            try {
                const responsePromise: AxiosPromise<T> = axios(options);
                const response = await responsePromise;
                if (cancelRequest) return;
                dispatch({ type: API_SUCCESS, payload: response.data });
            } catch (e) {
                console.log("Got error", e);
                dispatch({ type: API_ERROR, payload: e.message });
            }
        };
        fetchData(cancelRequest);

        return () => {
            cancelRequest = true;
        }

    }, [options]);

    const executeFetch = (url: string, options: AxiosRequestConfig = axiosInitialOptions): void => {
        options.url = url;
        setOptions(options);
    };


    return { ...state, executeFetch}

问题是，当我做这样的事情时，data 替换为新的响应（POST 请求），然后我的 UI 崩溃（没有更多的文章列表..）

当我需要在同一个组件中调用另一个 API 并同时保持 HTTP 挂钩的可重用性时，管理此类情况的最佳做法是什么？

我只是想在我的 GET 请求之后在组件中的某处执行 POST 请求 - 如何以可重用的方式执行它并解决我的问题？

Answer 1

您可以重构自定义挂钩以接收回调函数。我省略了cancelRequest的部分，如果你使用axios可以通过CancelToken取消请求：

export function useHttp<T>(initUrl: string): UseHttp<T> {
   const initOptions: AxiosRequestConfig = { url: initUrl };

   const [options, setOptions] = useState(initOptions);

   const useHttpReducer = createHttpReducer<T>();
   const [state, dispatch] = useReducer(useHttpReducer, {
      isLoading: false,
      error: '',
   });

   const fetchData = async (options, callback) => {
      if (!options.url) return;
      dispatch({ type: API_REQUEST});
      try {
         const responsePromise: AxiosPromise<T> = axios(options);
         const response = await responsePromise;
         dispatch({ type: API_SUCCESS, payload: response.data });
         callback(response.data);
      } catch (e) {
         console.log("Got error", e);
         dispatch({ type: API_ERROR, payload: e.message });
      }
   };

   const executeFetch = (url: string, requestOptions: AxiosRequestConfig = axiosInitialOptions, callback): void => {
      options.url = url;
      fetchData({...options, ...requestOptions}, callback);
   };

   return { ...state, executeFetch}
};

用法：

const [articles, setArticles]= useState();
const { error, isLoading, executeFetch } = useHttpRequest();


const handleChange = (article: IArticle, event: React.ChangeEvent<HTMLInputElement>) => {
   executeFetch(`updateNews?id=${article.id}`, { method: 'post', data: { isRead: event.target.checked }}, setArticles);
};