为什么自定义钩子返回结果两次

Question

下面的帖子是关于创建一个用于获取数据的自定义钩子，它很简单。

https://dev.to/patrixr/react-writing-a-custom-api-hook-l16

虽然有一部分我不明白它是如何工作的。

为什么这个钩子会返回两次结果？ (isLoading=true isLoading=false)

function useAPI(method, ...params) {
    // ---- State
    const [data, setData]           = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError]         = useState(null);

    // ---- API
    const fetchData = async () => {
      onError(null);
      try {
        setIsLoading(true);
        setData(await APIService[method](...params));
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };

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

    return [ data, isLoading, error, fetchData ];
}


function HomeScreen() {
  const [ users, isLoading, error, retry ] = useAPI('loadUsers');

  // --- Display error
  if (error) {
    return <ErrorPopup msg={error.message} retryCb={retry}></ErrorPopup>
  }

  // --- Template
  return (
    <View>
      <LoadingSpinner loading={isLoading}></LoadingSpinner>
      {
          (users && users.length > 0) &&
            <UserList users={users}></UserList>
      }
    </View>
  )

Answer 1

您的finally 块在try 块之后触发。

请注意，无论是否抛出异常，finally 块都会执行。

The finally block

Answer 2

React 在事件处理程序和生命周期方法中批量状态更新。

fetchData 不是其中的任何一个，因此不会发生批处理。

现在，拨打fetchData()时：

const fetchData = async () => {
  onError(null);
  try {
    // #1 async setState
    setIsLoading(true);

    const data = await APIService[method](...params);

    // #2 async setState
    setData(data);

  } catch (e) {
    setError(e);
  } finally {

    // #3 async setState
    setIsLoading(false);
  }
};

成功时，有3异步事件，我们只对#1和#3感兴趣

• 将加载状态从默认值false设置为true
• 将加载状态从#1异步setState设置为false。

旁注：乍一看，这个钩子有缺陷，fetchData 在每次渲染时都会重新分配，您会收到缺少依赖项的警告。