React 17：“useEffect 缺少依赖项”和 useMutation 函数

Question

我正在学习反应查询，以下代码按预期工作，但我收到此警告消息：

React Hook useEffect has missing dependencies: 'code' and 'mutate'. Either include them or remove the dependency array.eslintreact-hooks/exhaustive-deps

但是，如果我在依赖项数组中添加“代码”和“变异”，则会出现无限循环。

React Hook useEffect has missing dependencies: 'code' and 'mutate'. Either include them or remove the dependency array.eslintreact-hooks/exhaustive-deps

我所做的简短解释：

1. 用户单击登录按钮，他将被重定向到网站以输入他的登录名/密码

import React, { useState, useEffect } from "react";
import { useMutation } from "react-query";
import * as api from "../api/api";

const getQuery = () => {
  const queryParams = new URLSearchParams(window.location.search);
  return queryParams.get("code");
};

const Authentication = () => {
  const [code] = useState(getQuery());

  useEffect(() => {
    if (code) {
      mutate.mutate(code);
    }
  }, []);

  const auth = async () => {
    window.location.href = `https://www.betaseries.com/authorize?client_id=${process.env.REACT_APP_API_KEY}&scope=&redirect_uri=${process.env.REACT_APP_API_URL_CALLBACK}`;
  };

  const mutate = useMutation(api.access_token, {
    onSuccess: (data) => {
      localStorage.setItem("isAuth", data.data.access_token);
    },
  });

  return <button onClick={auth}>Login</button>;
};

export default Authentication;

2. 成功登录后，他会使用 url params ?code=xxx 重定向到我的网站

3. 我捕获代码并使用它来调用将为我提供他的 access_token 的路线

const auth = async () => {
    window.location.href = `https://www.betaseries.com/authorize?client_id=${process.env.REACT_APP_API_KEY}&scope=&redirect_uri=${process.env.REACT_APP_API_URL_CALLBACK}`;
  };

Answer 1

mutate 函数本身是稳定的，但 useMutation 返回的对象却不稳定。如果你析构，你可以将它添加到你的依赖数组中：

\n

const { mutate } = useMutation(\xe2\x80\xa6)\n

\n