javascript - 在返回之前从 react 钩子(Hook)中获取更新的变量

Question

我有这个自定义获取数据 Hook

function fetchData(currentPage) {
  const [error, setError] = useState(null)
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function getData() {
      axios.get(`https://${MY_API}${currentPage}`)
        .then((res) => setData(res.data))
        .catch((err) => setError(err))
        .finally(() => setLoading(false))
    }
    getData()
  }, [currentPage])

  return { data, error, loading }
}

它被这样使用:

const { data, error, loading } = fetchData(currentPage)

因此，每当 currentPage 更改时，都会调用 Hook 。

我无法让 loading 变量在更改页面时更改为 true，它始终为 false，这是有道理的，因为这是在 Hook 结束时返回的内容。

如何在钩子(Hook)内将 loading 重置为 false？还是有另一种方法来处理这个问题？

Answer 1

为了简单地解决您的问题，加载标志应该由效果本身设置:

function fetchData(currentPage) {
  const [error, setError] = useState(null)
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true);

    async function getData() {
      axios.get(`https://${MY_API}${currentPage}`)
        .then((res) => setData(res.data))
        .catch((err) => setError(err))
        .finally(() => setLoading(false))
    }
    getData()
  }, [currentPage])

  return { data, error, loading }
}

如果您想取消挂起的请求并确保它们不会在页面更改后覆盖获取的数据，则必须取消它们。最简单的解决方案就是忽略响应(canceled 标志)。然而，axios supports cancelation所以正确的实现并不难:

function fetchData(currentPage) {
  const [error, setError] = useState(null)
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    let canceled = false;

    async function getData() {
      axios.get(
        `https://${MY_API}${currentPage}`,
        { cancelToken: source.token }
      )
        .then((res) => setData(res.data))
        .catch((err) => {
          if (!axios.isCancel(err)) {
            setError(err);
          }
        }
        .finally(() => {
          if (!canceled) {
            setLoading(false)
          }
        )
    }

    setLoading(true);

    getData();

    return () => {
      canceled = true;
      source.cancel();
    }
  }, [currentPage])

  return { data, error, loading }
}