主页 / 问题 / 1297372
Accepted
Alex
Asked:2022-06-21 06:45:55 +0000 UTC2022-06-21 06:45:55 +0000 UTC

在 React 钩子中取消 axios 请求时出错

  • 772

因此，有一个 React 钩子，其中，当单击按钮时，会向服务器发出请求，在此请求期间，用户可以单击按钮并取消请求。axios 功能按预期工作，但由于 React 挂钩中的状态更改，取消按钮要么不起作用，要么引发错误。

工作总体进展：

  1. 我们创建了两种状态——第一种用于用户数据，第二种用于显示数据加载的状态。
  2. cancelToken - 为每个用户请求设置取消令牌。
  3. 对于每个请求，我们重置可用数据（如果有）（用户已经按下按钮）并将请求状态设置为 true - 这反映在标记中以演示等待状态。正是这个状态更改步骤导致了问题；没有它，请求的取消将正常进行。
  4. 当接收到数据时，我们将请求的状态更改为 false 并设置接收到的用户数据。
  5. 单击取消按钮只需调用令牌的取消方法。如果使用上面的状态改变，那么这一步会引发错误——“Cannot read property 'cancel' of null”，没有它就没有错误。
const getServerData = () => {

    const [userData, setUserData] = useState(null);
    const [isDataFetched, setFetchingStatus] = useState(false);
    let cancelToken = null;

    const fetchSomeData = () => {
        cancelToken = Axios.CancelToken.source();

        setFetchingStatus(true);
        setUserData(null);

        Axios.get("api/index", {
            cancelToken: cancelToken.token
        }).then(data => {
            setFetchingStatus(false);
            setUserData(data.firstName);
        });
    };

    const cancelRequest = () => {
        cancelToken.cancel();
    };

    return (
        <div>
            {
                isDataFetched
                &&
                <div>
                    <h1>WAITING</h1>
                    <div><button onClick={cancelRequest}>Cancel request</button></div>
                </div>
            }
            <p>{ userData && userData.toString()}</p>
            <p>
                <button onClick={fetchSomeData}>Click me</button>
            </p>
        </div>
    )
javascript

1 个回答

  1. Best Answer

    在钩子组件中使用局部变量只允许用于中间计算，因为 每次重绘时，变量都会重置为其原始状态。

    或者，您可以使用 useRef 挂钩永久存储变量。

    const getServerData = () => {

    const [userData, setUserData] = useState(null);
    const [isDataFetched, setFetchingStatus] = useState(false);
    const cancelToken = useRef();

    const fetchSomeData = () => {
        cancelToken.current = Axios.CancelToken.source();

        setFetchingStatus(true);
        setUserData(null);

        Axios.get("api/index", {
            cancelToken: cancelToken.current.token
        }).then(data => {
            setFetchingStatus(false);
            setUserData(data.firstName);
        });
    };

    const cancelRequest = () => {
        cancelToken.current.cancel();
    };

    return (
        <div>
            {
                isDataFetched
                &&
                <div>
                    <h1>WAITING</h1>
                    <div><button onClick={cancelRequest}>Cancel request</button></div>
                </div>
            }
            <p>{ userData && userData.toString()}</p>
            <p>
                <button onClick={fetchSomeData}>Click me</button>
            </p>
        </div>
    )
    • 1

相关问题