Question

我正在使用一个自定义钩子，该钩子将URL作为参数并返回获取数据及其加载状态。因此，与大多数挂钩不同，我没有在需要时设置新状态的功能，这会在项目的这一点上引起各种问题，因为我碰巧需要一种在每次收到它时重新触发该自定义挂钩的方法。新的道具价值。

问题是，正如预期的那样，正在首先渲染组件时设置组件的状态，但是当它接收到新的道具时，它不会重新渲染/重新触发。

这是自定义钩子的样子：

//useFetch.js

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(JSON.parse(JSON.stringify(json)));
    setLoading(false);
  }

  useEffect(() => {
    fetchUrl();
  }, []);

  return [data, loading];
}

export { useFetch };

这就是我使用此钩子的方式：

//repos.js

import React from "react";
import { useFetch }  from "./fetchHook";


function Repos(props) {
  const [userRepos, reposLoading] = useFetch(`https://api.github.com/users/${props.users[props.count].login}/repos`);

  return reposLoading ? (
    <div className="App">
      stuff to render if it's still loading
    </div>
  ) : (
    <div
     stuff to render if it's loaded
    </div>
  );
}

Answer 1

将url添加到useFetch hook的依赖项数组中，这将确保在url prop更改时效果会重新运行

useEffect(() => {
  console.log("refetching url", url);
  fetchUrl();
}, [url]);

如何在没有useEffect或setState函数的情况下重新触发挂钩？

1 个答案: