useEffect 的奇怪行为

Question

我正在使用反应钩子构建一个项目。我的useEffect 函数如下所示...

useEffect(() => {
  (async function() {
    const queryParams = await qs.parse(props.location.search, { ignoreQueryPrefix: true }).code;
    if (queryParams != undefined) {
      setCode(queryParams);
      postLogin();
    }
  })();
});

postLogin 函数只是使用上面定义的查询参数向服务器发出的GET 请求。看起来是这样的……

const postLogin = async () => {
  await axios.get("http://XXX.XXX.X.XX:52805/user/auth", {
    params: {
      auth_code: code
    }
  }).then(result => {
    setAuthTokens(result.data.credentials.access_token);
    setLoggedIn(true);
  }).catch(e => {
    setIsError(true);
  });
}

发生的情况是，当我只希望它被调用一次时，该请求将被多次调用。

正如您在上面的屏幕截图中看到的，在 5 个请求中，一个成功，另一个失败，我不确定是什么原因造成的。任何想法都会有所帮助。

Answer 1

您可能需要添加一个空数组 ([]) 作为钩子的第二个参数。它会阻止钩子多次运行。

数组应该包含变量（通常是组件状态的一部分），如果它们发生变化，钩子应该监视并重新运行。 无论钩子做什么，变量都应该是至关重要的。

假设您的钩子应该显示某个 类别 的 youtube 频道的订阅者数量 - 假设类别是 A、B 和 C（假设），用户可以在其中切换要查看的类别可能正在使用下拉列表；那么数组将包含 category 变量，这样每当它发生变化时，挂钩就会运行以获取该类别中的订阅者数量。让数组为空是一种告诉 React 你没有依赖项并且你可以接受钩子第一次运行时所做的事情的一种方式。

React 比较该数组中的值以了解每次渲染的变化，如果它们没有变化，则跳过钩子。如果你把它留空，那么任何值都不会改变，这意味着钩子将运行一次，然后在随后的重新渲染中被跳过。

Answer 2

您的 useEffect 挂钩在每次渲染时运行。由于您在请求完成后调用setIsError 或setLoggedIn，这将触发另一个渲染和另一个渲染等。老实说，我很惊讶没有无限循环。要解决此问题，请尝试使其仅在之前未尝试过的情况下尝试登录（没有出现错误且当前未登录。）像这样：

useEffect(async () => {
  if (isLoggedIn || isError) return; // Don't try again if a request has already succeeded or failed.
  // Optionally use "isLoggedIn || isError || isLoading" to prevent multiple concurrent requests,
  // which may cause further re-rendering.
  const queryParams = await qs.parse(props.location.search, { ignoreQueryPrefix: true }).code;
  if (queryParams != undefined) {
    setCode(queryParams);
    postLogin();
  }
});

如果你确定你只希望它运行一次（在第一次渲染时）给它一个空的依赖数组，这样它就不会再运行了。