Javascript 如何修复无休止的axios请求？

我正在使用Spotify的API构建一个web应用程序。我正在请求获取特定艺术家的专辑数据。当我尝试下面的代码时，handleClick在Albums.js中被无休止地调用。它与异步有关吗

Albums.js

import React, { Component } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import AlbumCard from "./AlbumCard";

export class Albums extends Component {
  constructor(props) {
    super(props);

    this.state = { albums: [] };
    this.handleClick = this.handleClick.bind(this);
  }

  async handleClick() {
    const {
      match: { params },
    } = this.props;
    console.log(params.id);
    try {
      const res = await axios.get(
        `http://localhost:4000/albums/${encodeURIComponent(params.id)}`,
        {
          params: {
            id: params.id,
          },
        }
      );
      console.log(`Returned album data from the server: ${res}`);
      this.setState({ albums: res.data });
    } catch (err) {
      //   .catch((err) => console.log(err));
      console.log(err);
    }
  }

  render() {
    return (
      <>
        <div className="container" style={{ color: "white" }}>
          {/* {`${id}'s albums`} */}
          {console.log(this.handleClick())}
          {console.log(this.state.albums)}
        </div>
      </>
    );
  }
}

export default Albums;

---

不，这与您在

render

内部调用

handleClick

有关

在

handleClick

中，调用

setState

，当设置状态时，调用

render

，然后再次调用

handleClick

，再次设置状态，导致再次调用

render

，等等

您可能打算将

handleClick

设置为

render

因此，下面的内容不会导致无休止的循环，并且可能更接近您实际想要做的事情

render（）{
返回(
点击我
{console.log（this.state.albums）}
);
}

不，这与您在

render

内部调用

handleClick

有关

在

handleClick

中，调用

setState

，当设置状态时，调用

render

，然后再次调用

handleClick

，再次设置状态，导致再次调用

render

，等等

您可能打算将

handleClick

设置为

render

因此，下面的内容不会导致无休止的循环，并且可能更接近您实际想要做的事情

render（）{
返回(
点击我
{console.log（this.state.albums）}
);
}

您正在调用

handleClick

内部渲染方法（在console.log中）

以下是流程：

• 渲染组件并调用handleClick，然后设置状态
• 组件被重新渲染，再次调用handleClick并设置状态
• 组件被重新渲染。。。。等等

因此，有一个按钮并提供handleClick对

onClick

事件的引用

{/*{`${id}的相册`}*/}
{/*{console.log（this.handleClick（））}/您正在调用
handleClick
内部呈现方法（在console.log中）

以下是流程：


渲染组件并调用handleClick，然后设置状态
组件被重新渲染，再次调用handleClick并设置状态
组件被重新渲染…等等

因此，有一个按钮并提供handleClick对
onClick
事件的引用


{/*{`${id}的相册`}*/}
{/*{console.log（this.handleClick（））}/您正在
render（）
中请求API，这就是为什么它是无止境的

export class Albums extends Component {
  constructor(props) {
    super(props);

    this.state = { albums: [] };
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount(){
    this.handleClick() // I don't know why its name is `handleClick`.
  }
  ...

  render() {
    return (
      <>
        <div className="container" style={{ color: "white" }}>
          <button onClick={handleClick}>Click</button>
          {/* {`${id}'s albums`} */}
          {/* console.log(this.handleClick()) */} /* should be removed */
          {console.log(this.state.albums)}
        </div>
      </>
    );
  }
}

导出类相册扩展组件{
建造师（道具）{
超级（道具）；
this.state={albums:[]}；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
this.handleClick（）//我不知道为什么它的名字是'handleClick'。
}
...
render（）{
返回(
点击
{/*{`${id}的相册`}*/}
{/*console.log（this.handleClick（））*/}/*应该删除*/
{console.log（this.state.albums）}
);
}
}
您正在
呈现（）中请求API，这就是为什么它是无止境的

export class Albums extends Component {
  constructor(props) {
    super(props);

    this.state = { albums: [] };
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount(){
    this.handleClick() // I don't know why its name is `handleClick`.
  }
  ...

  render() {
    return (
      <>
        <div className="container" style={{ color: "white" }}>
          <button onClick={handleClick}>Click</button>
          {/* {`${id}'s albums`} */}
          {/* console.log(this.handleClick()) */} /* should be removed */
          {console.log(this.state.albums)}
        </div>
      </>
    );
  }
}

导出类相册扩展组件{
建造师（道具）{
超级（道具）；
this.state={albums:[]}；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
this.handleClick（）//我不知道为什么它的名字是'handleClick'。
}
...
render（）{
返回(
点击
{/*{`${id}的相册`}*/}
{/*console.log（this.handleClick（））*/}/*应该删除*/
{console.log（this.state.albums）}
);
}
}