Javascript 返回前从react钩子中获取更新的变量

我有一个自定义的获取数据钩子

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

更改时，就会调用钩子

我很难让

加载

变量在更改页面上更改为true，它总是false，这很有意义，因为这是钩子末尾返回的内容

---

如何在钩子中将

加载重置为false？还是有其他办法来解决这个问题
 为了简单地解决您的问题，加载标志应该由效果本身设置：

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 }
}

如果要取消挂起的请求并确保它们在页面更改后不会覆盖获取的数据，则必须将其取消。
最简单的解决方案就是忽略响应（
cancelled
flag）。但是，正确的实施并不难：

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 }
}

使用wait关键字怎么样？
你能给钩子状态设置器传递第二个参数吗？我不敢肯定你是对的。我将修改我的答案。但是，除非使用或类似的解决方法，否则问题仍然存在。谢谢你指出这一点！我认为您只需在
useffect
中添加
setLoading（true）
的解决方案就足够了
function fetchData(currentPage) {
  const [error, setError] = useState(null)
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)

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

  return { data, error, loading }
}