React 钩子依赖 - 无限循环

Question

我有以下代码：

import React from "react";
export const useFetch = (promise, args = [], options = {}) => {
  const [state, setState] = React.useState({
    loading: false,
    data: null,
    error: null
  });
  if (!args) args = [];
  const fetch = React.useCallback((...args) => {
    setState({
      ...state,
      loading: true,
      error: null
    });
    return promise(...args)
      .then(response => {
        setState({
          ...state,
          loading: false,
          data: response
        });
        return response;
      })
      .catch(error => {
        setState({
          ...state,
          loading: false,
          error
        });
      });
  }, [promise, state]);
  React.useEffect(() => {
    if (options.now) {
      fetch(...args);
    }
  }, [args, fetch, options.now]);
  return {
    fetch,
    ...state
  };
};

但是当我尝试像这样使用时，我得到了一个无限的控制台.log循环：

const allUsers = () => Promise.resolve([{ name: 'Bruno' }])
function App() {
  const { data } = useFetch(allUsers, [], { now: true })
  console.log('->', data)
  return (
    <span>Testing hook</span>
  )
}

所有的deps和useCallback都是来自lint react-hooks/exhaustive-deps的建议。那么，我做错了什么？

感谢您的帮助。

Answer 1

有 2 个问题。1.您的获取每次都会获得一个新值，因为它的状态为依赖项，并且每次都会导致useEffect运行，因此无限循环。2.useEffect 将 args 作为依赖项，每次也不相同，您不需要传递 args 来获取，因为它由于闭包而已经可用。

这是一个更新的代码，不会进入无限循环。 您可能会遇到 lint 问题，但您应该暂时忽略它们，直到此 linter 变得更加标准。

const useFetch = (promise, args = [], options = {}) => {
  const [state, setState] = React.useState({
    loading: false,
    data: null,
    error: null
  });
  if (!args) args = [];
  const fetch = React.useCallback(() => {
    setState({
      ...state,
      loading: true,
      error: null
    });
    return promise(...args)
      .then(response => {
        setState({
          ...state,
          loading: false,
          data: response
        });
        return response;
      })
      .catch(error => {
        setState({
          ...state,
          loading: false,
          error
        });
      });
  }, [promise]);
  React.useEffect(() => {
    if (options.now) {
      fetch();
    }
  }, [fetch, options.now]);
  return {
    fetch,
    ...state
  };
};
const allUsers = () => Promise.resolve([{ name: 'Bruno' }])

const App = props => {
  const { data } = useFetch(allUsers, [], { now: true });
  console.log(data, "=>");
  return <input name="name" onChange={this.handleInputChange} />;
}