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

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

转载作者：行者123 更新时间：2023-12-03 14:22:59

25

4

我通过一系列项目进行映射来生成图像，但每次它都会将我的代码发送到无限循环中。这是我的代码:

这是映射代码:

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;

最佳答案

代码中的问题是您在渲染方法内调用 getSrc 方法并更新状态。

Whenever there is a change in state, React will call the render method.

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

解决方案。

从 render 方法中删除 this.getSrc 并在 componentDidMount 生命周期 Hook 中调用 getSrc 方法。

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

示例。

let myImages = this.state.imageUrl;

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


componentDidMount() {
 this.getSrc();
}

关于javascript - 使用axios时如何停止javascript中的无限循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59825663/

25

4

0

文章推荐： reactjs - html 中的 Jest 覆盖率报告缺少覆盖率值

文章推荐： javascript - react | TypeError : this. state.cars.map 不是一个函数

文章推荐： node.js - React + Webpack + Material UI 样式在生产中的突破

文章推荐： reactjs - 在 Typescript 中查找解构参数对象中未使用的属性

axios - 如何停止拦截器内的 axios 响应传播
我有一个 axios 拦截器，我在其中捕获 401 错误并将用户重定向到登录页面。问题是在 window.location 运行之后和实际重定向之前 - axios 操作继续到原始调用者。我想停止进程
axios - Nuxt Axios 模块读取状态码
我正在调用一个返回至少 2 个成功状态代码的 Rest API。正常的 200 OK 和 202 Accepted 状态代码。两者都在正文中返回一个内容。如果我在 postman 中执行我的电话
axios - 如何从 Axios 获取响应时间
任何人都可以提出任何从 Axios 获得响应时间的方法吗？我找到了 axios-timing，但我真的不喜欢它(有争议，我知道)。我只是想知道是否有人找到了一些记录响应时间的好方法。最佳答案您可以
axios - 使用默认方法创建 axios 实例？
我正在尝试使用 axios.create() 创建一个 axios 实例但似乎无法弄清楚如何在实例上设置默认方法。不工作 export default axios.create({ requ
axios - 如何在代码中的一个位置记录所有 axios 调用
我正在将 axios 用于 React 应用程序，并且我想记录我在应用程序中任何位置进行的所有 axios 调用。我已经通过 create 函数使用了 axios 的单个全局实例，并且我能够记录通用的
axios - NestJS:使用基于 axios 的客户端的端到端测试未按预期工作
我有一个公开一些端点的 NestJS 应用程序，我已经编写了一个客户端应用程序，我计划将其作为 NPM 包发布以与 nest 服务器一起使用。我正在尝试编写启动 nest 服务器的端到端测试，将其连接
axios - 将图片从数据 url 上传到 Axios？
我一直在使用这个将图像文件上传到 API (Graphcool)，并且一切正常: fileUpload(file) { let data = new FormData();
javascript - Axios:对多个 axios 实例使用相同的拦截器
在我的代码库中有使用创建的各种 Axios 实例 axios.create() 因为我的应用程序中使用了多个基本 URL。所以每个 baseURL 我们都创建了一个对应的 Axios 实例。现在在
mocking - 使用 axios 构造函数时模拟 axios
我有一个 API 实用程序函数，它使用构造函数符号调用 axios: axios({ method, url: `${BASE_URL}/${url}`, data }); 我想用
mocking - 使用 axios 拦截器模拟 axios
我正在尝试使用 mockAxios 来测试 axios 拦截器。 export default { get: jest.fn(() => Promise.resolve({ data: {}
axios - 什么是 axios 取消 token ？
https://github.com/axios/axios#cancellation 我正在研究如何取消上传 PUT 请求并在文档中遇到了这一部分。为什么需要 token 才能取消？简单来说流程或过
axios - 如何在 axios PUT 请求中传递参数？
axios.put('http://localhost:3000/api/userDatas/findUserAddProp',{ params: { userId: "5bb
javascript - axios 请求立即开始，无需等待 axios.all
我的 axios promise 没有按预期工作。我猜执行是在 forEach 循环内开始的。我希望 axios 执行仅在 batch.commit 之后开始 aMobileNumbers.forEa
javascript - async + axios 还是只是 axios，这就是问题所在
有区别吗 useEffect(()=>{ async function fetchData(){ await axios .get(path, config) .t
reactjs - 在另一个 axios 请求中使用 axios 响应数据
我正在使用 axios 获取信息，并且我需要在不同 axios 响应的另一个处理程序中使用该信息。我似乎无法在第二个响应处理中使用第一个响应中加载的数据。例如: const [firstData,
reactjs - 在 axios 的所有实例中使用的 axios 中间件
我在我的 React 应用程序中使用 axios，在我的许多脚本中使用 import axios from 'axios 。我想使用一种为所有 axios 调用/错误调用的中间件。我该如何处理这个问题
javascript - Axios/Vue - 防止 axios.all() 继续执行
在我的应用程序中，为了对用户进行身份验证，我调用了 fetchData 函数。如果用户 token 无效，应用程序将运行 axios.all()，我的拦截器将返回大量错误。如何防止 axios.al
axios - 使用 axios POST 请求传递 header
我已经按照 npm 包文档中的建议编写了一个 Axios POST 请求，例如: var data = { 'key1': 'val1', 'key2': 'val2' } axios
vue.js - axios 和 vue-axios 有什么区别？
谁能提供有关 axios 和 vue-axios 之间区别的详细信息？我们需要使用哪一个？两者都需要使用api吗？谢谢最佳答案 vue-axios 只是一个包装器，将 axios 暴露给组件作为
axios - 带有 Axios 和 Loopback 的 "where"过滤器中的变量
我在向 Loopback(v3) API 发出的 Axios 请求中使用变量时遇到了麻烦。什么有效？如果我使用“REST 表示法”，它运行良好: getInfo() { axios.get(

首页

博学

6Ren·AI

商城

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