axios 在调用时不断得到运行

Question

我从 Spotify

创建 app.get 到 return 令牌

这是代码：

 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));
});

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

这里是代码：

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 也会在每次渲染时发生变化...)

axios 在调用时不断得到运行

axios get run constantly when call

javascript

spotify

node.js

reactjs

axios 在调用时不断得到 运行

axios get run constantly when call

javascript

spotify

node.js

reactjs

axios 在调用时不断得到运行