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

Question

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

这是映射代码：

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;

Answer 1

代码中的问题是您在 render 方法中调用getSrc方法并updating the state 。

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

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

解决方案。

取出this.getSrc从渲染方法，并调用getSrc的方法componentDidMount生命周期挂钩。

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

例子。

let myImages = this.state.imageUrl;

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


componentDidMount() {
 this.getSrc();
}

Answer 2

您正在通过以下方式更改状态的事实：

   this.setState({
      imageUrl: myUrl
   })

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

Answer 3

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

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

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

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-01-20 14:48:17

解决方案2
0 2020-01-20 14:55:20

解决方案3
0 2020-01-20 15:08:21

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-01-20 14:48:17

解决方案2 0 2020-01-20 14:55:20

解决方案3 0 2020-01-20 15:08:21

解决方案1
1 已采纳 2020-01-20 14:48:17

解决方案2
0 2020-01-20 14:55:20

解决方案3
0 2020-01-20 15:08:21