axios 在调用时不断运行

Question

我创建 app.get 以从 Spotify 返回令牌

这里是代码：

 axios({
    url: "https://accounts.spotify.com/api/token",
    method: "POST",
    headers: {
      Authorization:
        "Basic " +
        Buffer.from(clientId + ":" + clientSecret).toString("base64"),
      "Content-Type": "application/x-www-form-urlencoded",
    },
    params: {
      grant_type: "refresh_token",
      refresh_token: refreshToken,
    },
  })
    .then((response) => {
      res.json({
        accessToken: response.data.access_token,
        expiresIn: response.data.expires_in,
      });
    })
    .catch((error) => console.log(error.statusCode));
});

每当我调用客户端的一个函数时，它都会返回令牌，但是当我在控制台记录下面的代码时，它会不停地打印出来

这里是代码：

let getData = () => {
    axios.request("http://localhost:3001/refresh_token").then((response) => {
      SetToken(response.data);
      setExpires(response.data.expiresIn);
      console.log(token);
    });
  };

  useEffect(() => {
    const data = setInterval(() => {
      getData();
    }, 1000);
  });

  return (
    <div className="spotify">
      <button
        onClick={() => {
          getData();
        }}
      >
        click
      </button>
    </div>
  );

谢谢

Answer 1

你的useEffect 缺少一个依赖数组，所以每次重新渲染你的组件时都会调用它（更糟糕的是，它会创建一个新的间隔超时，每次都不会清除）。我会勇敢地假设 setToken 和 setExpires 是组件的状态设置器，所以它们会导致重新渲染。

你需要

useEffect(() => {
  const dataTimer = setInterval(() => {
    getData();
  }, 1000);
  return () => clearInterval(dataTimer);
}, []); // <- this empty dependency array

所以它只会在你的组件挂载时被调用一次，所以当它卸载时间隔会被清理。

(getData 也应该在那个依赖数组中，但是由于您似乎没有使用useCallback 来记忆它，这将否定空数组的好处，因为getData 的身份也会发生变化在每次渲染时...）