Как остановить бесконечное l oop in javascript при использовании ax ios? - PullRequest
Новая
       7

Как остановить бесконечное l oop in javascript при использовании ax ios?

3 голосов
/ 20 января 2020

Я сопоставляю массив элементов для генерации изображений, но каждый раз он отправляет мой код в бесконечное число l oop. Вот мой код:

Это код отображения: 

let mySrc = this.state.imageUrl;

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

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

Это функция "getSr c": 

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

Всякий раз, когда я go на странице, он перетасовывает все 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;

Ответы [ 3 ]

1 голос
/ 20 января 2020

Проблема в коде заключается в том, что вы вызываете метод getSrc внутри метода рендеринга и updating the state.

При каждом изменении состояния React вызывает метод рендеринга.

В этом случае React вызывает метод рендеринга, и в методе рендеринга происходит обновление состояния, следовательно, React вызывает метод рендеринга снова, и этот процесс продолжается вечно.

Решение.

Удалите this.getSrc из метода рендеринга и вызовите метод getSrc в componentDidMount ловушке жизненного цикла.

Я также внес небольшое изменение в функцию карты.

Пример. 

let myImages = this.state.imageUrl;

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


componentDidMount() {
 this.getSrc();
}
0 голосов
/ 20 января 2020

Также я думаю, что вам может понадобиться использовать карту, например, 

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

   return(
   <img src={mySrc}/>)
})}
0 голосов
/ 20 января 2020

Тот факт, что вы меняете состояние с помощью: 

   this.setState({
      imageUrl: myUrl
   })

и в то же время вы используете this.state.imageUrl внутри своей функции рендеринга, делает его l oop непрерывно, потому что каждый раз, когда он рендерится , он снова начинает выполнять array.map, и вызов array.map инициирует обновление нового состояния ... так что он зацикливается навсегда.

...