0

我有两个文件：

  1. 应用程序.js
  2. 使用Fetch.js

useFetch.js 是一个自定义钩子，我想用它来使用 fetch 对某些 API 进行请求。

这是 App.js 的内容：

import React, { useState } from 'react';
import useFetch from './hooks/useFetch';
...
const App = () => {
  const [page, setPage] = useState(1);
  const [data, error, setUrl, isLoading, abort] = useFetch();

  const handleAction = () => {
    if (isLoading) {
      abort();
      console.log('abort signal sended');
    } else {
      setUrl(`https://reqres.in/api/users?page=${page}`);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div
          className="App-header-button"
        >
          <Button
            variant="contained"
            color={isLoading ? 'secondary' : 'primary'}
            onClick={() => handleAction()}
          >
            {isLoading ? 'Cancel' : 'Test'}
          </Button>
        </div>
        {data && 'Data loaded'}
        <input type="text" onChange={event => setPage(event.target.value)} value={page} />
      </header>
    </div>
  );
};

export default App;

如您所见，是一个简单的应用程序。最后的输入用于设置要从 API 显示的页面。

这是我自定义的 useFetch.js 的内容：

import { useState, useEffect } from 'react';

  const useFetch = (defaultUrl) => {
  const [url, setUrl] = useState(defaultUrl);
  const [data, setData] = useState();
  const [error, setError] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [controller] = useState(new AbortController());

  const { signal } = controller;

  useEffect(() => {
    if (url) {
      setIsLoading(true);
      fetch(url, { signal })
        .then(res => res.json())
        .then((res) => {
          setData(res.data);
          setIsLoading(false);
        })
        .catch((err) => {
          setError(err);
          console.log(err.name);
          setIsLoading(false);
        });
    }
  }, [url]);

  const abort = () => {
    controller.abort();
    setIsLoading(false);
  };

  return [
    data,
    error,
    setUrl,
    isLoading,
    abort,
  ];
};

export default useFetch;

我这里有一个问题......这很好用，当我更改页面并点击按钮时会显示数据。问题是：如果我在页面上按下按钮并在同一页面上再次按下按钮，则没有任何反应。这有一定的意义，因为url没有改变，仍然是发送到钩子的相同数据。假设用户想要在同一页面再次点击按钮来刷新数据。在这种情况下，我需要钩子再次发出相同的调用，重复相同的 url。那么我该怎么做才能强制钩子再次“渲染”它呢？

[更新我]

在@Atul 的帮助下，我进行了这些更改并开始工作。我只是想知道这是否是实现这一目标的好方法或最合适的方法。

在 useFetch.js 上：

  useEffect(() => {
    if (url && refreshFlag) {
      setIsLoading(true);
      fetch(url, { signal })
        .then(res => res.json())
        .then((res) => {
          setData(res.data);
          setIsLoading(false);
          setRefreshFlag(false);
        })
        .catch((err) => {
          setError(err);
          console.log(err.name);
          setRefreshFlag(false);
          setIsLoading(false);
        });
    }
  }, [url, refreshFlag]);

在 App.js 上：（仅显示按钮操作的代码）

  const handleAction = () => {
    if (isLoading) {
      abort();
      console.log('abort signal sended');
    } else {
      refresh(true);
      setUrl(`https://reqres.in/api/users?page=${page}`);
    }
  };
4

0 回答 0