Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript setstate回调后useState不更改?_Javascript_Reactjs_React Hooks_Fetch_React State - Fatal编程技术网

Javascript setstate回调后useState不更改?

Javascript setstate回调后useState不更改?,javascript,reactjs,react-hooks,fetch,react-state,Javascript,Reactjs,React Hooks,Fetch,React State,我只想在错误状态下添加错误消息。但当发生错误时,setError不更改表示不添加错误消息。后端以json格式{“error”:“error message”}给出错误消息,如果控制台记录该错误,则该错误工作正常,但错误状态未更新 import { useState, useCallback, useRef, useEffect } from 'react'; export const useHttpClient = () => { const [ isLoading, setIs

我只想在错误状态下添加错误消息。但当发生错误时,setError不更改表示不添加错误消息。后端以json格式{“error”:“error message”}给出错误消息,如果控制台记录该错误,则该错误工作正常,但错误状态未更新

import { useState, useCallback, useRef, useEffect } from 'react';

export const useHttpClient = () => {
    const [ isLoading, setIsLoading ] = useState(false);
    const [ error, setError ] = useState();

    const activeHttpRequests = useRef([]);

    const sendRequest = useCallback(async (url, method = 'GET', body = null, headers = {}) => {
        setIsLoading(true);
        const httpAbortCtrl = new AbortController();
        activeHttpRequests.current.push(httpAbortCtrl);
         try {
            const response = await fetch(url, {
                method,
                body,
                headers,
                signal: httpAbortCtrl.signal
            });
            const responseData = await response.json();
            activeHttpRequests.current = activeHttpRequests.current.filter(
                reqCtrl => reqCtrl !== httpAbortCtrl
            );

            if(!response.ok) {
                throw new Error(responseData.error);
            }

            setIsLoading(false);
            return responseData;
        } catch (e) {
            setError(e.message);
            setIsLoading(false);
            throw e;
        }
    }, []);

     const clearError = () => {
         setError(null);
     };

    useEffect(() => {
        //this runs as cleanup function before next time useEffect run or also when an component use useEffect unmount
        return () => {
            activeHttpRequests.current.forEach(aboutCtr => aboutCtr.abort());
        }
    }, []);

     return { isLoading, error, sendRequest, clearError };
}


由于您的后端使用JSON进行响应,这意味着响应状态代码可能为200(成功)。这使得“response.ok”是正确的


您必须查看返回的JSON字符串以查找有效数据或错误消息。

小问题,为什么您要2
componentDidMount
?您可以合并这两个函数,并从第一个函数返回cleanup函数。如果您尝试在catch语句处设置断点,并查看它是否抛出错误。您的API正在发送什么http错误代码?404? 500?从
catch
中重试后,捕获错误的是什么?您可能正在终止线程。它似乎正在为我更新:。您能分享您看到状态未更新的部分吗?您如何验证/验证“错误”状态未更新?您是否可以使用这个复制问题的自定义钩子更新您的问题以包含示例组件?