使用axios时如何停止javascript中的无限循环？答案

【问题标题】：How to stop an infinite loop in javascript when using axios?使用axios时如何停止javascript中的无限循环？
【发布时间】：2020-01-20 14:45:53
【问题描述】：

我正在映射一组项目以生成图像，但每次它都会将我的代码发送到一个无限循环中。这是我的代码：

这是映射代码：

let mySrc = this.state.imageUrl;

{myImages.map(image => {
       this.getSrc(userId, image.id); 

       return(
       <img src={mySrc}/>)
    })}

这是“getSrc”函数：

getSrc = async (userId, image) => {
    axios
      .get(`http://mysiteeee.com/api/getimage/${userId}/photo/${image}`, {
           auth: {
              username: 'username',
              password: 'password'
              },
              responseType: 'blob'
            })
      .then(res => {
          let myUrl = URL.createObjectURL(res.data)
          console.log(myUrl)
          this.setState({
              imageUrl: myUrl
              })
      })
      .catch(err => console.log(err))
    }

每当我访问该页面时，它都会一遍又一遍地遍历所有图像 URL/图像。如何只显示一次图像 URL / 图像？如何停止无限地随机播放图像？

这是整个组件的代码：

import React from 'react';
import axios from 'axios';

import HeaderTwo from './HeaderTwo';


class FullDescription extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            eventInfo: [],
            imageUrl: [],
            clicked: false,
        }
    }

    componentDidMount = () => {
        window.scrollTo(0,0);

        this.props.state.images.map(image => 
            this.getSrc(this.props.state.id, image.id))

        // this.getSrc(this.props.state.id, this.props.state.images[1].id)
    }

    changeClicked = (userId) => {
        if(this.state.clicked === false){
            this.setState({
                clicked: true
            }) 
        } else {
            this.setState({
                clicked: false
            })
        }
    }

    getSrc = async (userId, image) => {
        axios
            .get(`http://http://mysiteeee.com/api/getimage/${userId}/photo/${image}`, {
                auth: {
                    username: 'username',
                    password: 'password'
                    },
                    responseType: 'blob'
            })
            .then(res => {
                let myUrl = URL.createObjectURL(res.data)
                this.state.imageUrl.push(myUrl)

                // this.setState({
                //     imageUrl: myUrl
                //     })
            })
            .catch(err => console.log(err))
    } 

    render() {
        let item = this.props.state;
        let date = new Date(item.date).toDateString();
        let time = new Date(item.date).toLocaleTimeString();
        let userId = this.props.state.id;
        let myImages = this.state.imageUrl;
        let checkMark = <button className='attend-button' onClick={() => this.changeClicked(userId)}>Attend Event</button>;

        console.log(myImages)

        if(this.state.clicked === true){
            checkMark = <button className='attend-button' onClick={() => this.changeClicked(userId)}>&#x2713; Attend Event</button>
        } else {
            checkMark = <button className='attend-button' onClick={() => this.changeClicked(userId)}>Attend Event</button>
        }

        return(
            <div>
                <HeaderTwo/>
                <body id="full-description-page">
                <div className='images-section'>
                    {myImages.map(mySrc => <img src={mySrc}/>)}
                </div>
                    <div id='heading-strip'>
                        <img src={myImages} className='heading-image'/>
                        <div className='heading-info'>
                            <p className='date'>{date}<br/>{time}</p>
                            <p className='name'>{item.name}</p>
                            <p className='location'><b>Location:</b> <br/>{item.location.name}, {item.location.address}, {item.location.city}, {item.location.state}</p>
                            <div className='button-area'>
                                    {checkMark}
                                </div>
                        </div>
                    </div>

                    <br/>
                    <p className='description'><b>Description:</b> {item.description}</p>


                    <br/><br/><br/><br/>
                    <p className='comments-header'><b>Comments:</b></p>
                    <div className='comments-section'>
                        {item.comments.map(comment =>
                            <div className='comments'>
                                <p>{comment.text}<br/><b>-{comment.from}</b></p>
                            </div>
                        )}
                    </div>
                </body>
            </div>
        )
    }
}

export default FullDescription;

【问题讨论】：

我注意到您可以检查一些事情，以帮助您找到导致无限循环的原因，* myImages 是当时正在设置的状态值吗？ * 你是在 getSrc 函数中返回 axios get 吗？ * 也尝试检查 setState 你在 .then 上所做的事情

标签： javascript reactjs infinite-loop react-state

【解决方案1】：

代码中的问题是你在渲染方法中调用getSrc方法和updating the state。

每当状态发生变化时，React 都会调用 render 方法。

在这种情况下，React 调用了 render 方法，并且在 render 方法中有一个状态更新，因此 React 再次调用了 render 方法，并且这个过程一直持续下去。

解决方案。

从 render 方法中移除 this.getSrc 并在 componentDidMount 生命周期钩子中调用 getSrc 方法。

我也对地图功能做了一些小改动。

示例。

let myImages = this.state.imageUrl;

{myImages.map(mySrc => <img src={mySrc}/>)}


componentDidMount() {
 this.getSrc();
}

【讨论】：

谢谢！这可以阻止无限循环。我正在尝试让每张照片都显示出来。我将 imageUrl 更改为一个数组，以将所有链接推送到 imageUrl 数组中。您知道我将如何映射链接数组以呈现页面上的所有图像吗？这个问题是链接没有与之关联的属性键，只有索引。我需要做一个 for 循环吗？
map 函数用于遍历数组，如果 imageUrl 数组中有图像链接，那么我当前截取的渲染代码将起作用。
我不知道为什么，但现在没有图像会显示。当我在 imageUrl 中只有一个 url 字符串时，它将呈现单个图像。但是，如果我在 imageUrl 中有一组图像并映射到数组上，则不会出现任何图像。
在componentDidMount中。我有 console.logs 显示它不是空的。我可以看到网址。它们只是没有在页面上呈现。
我应该在函数中像这样推送 url：this.state.imageUrl.push(myUrl)。或者有没有办法推送我应该做的 this.setState 中的链接？

【解决方案2】：

你正在改变状态的事实：

   this.setState({
      imageUrl: myUrl
   })

同时你在你的渲染函数中使用this.state.imageUrl，让它不断循环，因为每次渲染时，它都会重新开始执行array.map，并且array.map调用将触发新的状态更新...所以它永远循环。

【讨论】：

【解决方案3】：

另外我认为你可能需要像这样使用地图

{myImages.map(image => {
   this.getSrc(image.userId, image.image.id); 

   return(
   <img src={mySrc}/>)
})}

【讨论】：