Question

我有两个文件：

App.js
useFetch.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进行相同的调用。那么，我该如何强制挂钩再次“呈现”呢？

[UPDATE I]

在@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}`);
    }
  };

如何在响应中强制从父组件重新渲染钩子？

0 个答案: