Javascript React：函数发送无限GET请求

组件，该组件从getConvForNum上的服务器获取数据，但不知何故它进入了一个无限循环。 即使我只保留render（）和这个函数，它也会继续向服务器发送GET请求

OpentTickets.js

import React from 'react';
import axios from 'axios';
import {Button, Accordion, Card, Form} from 'react-bootstrap';

export default class PersonList extends React.Component {
    state = {
        people: [],
        customer_pn: '',
        date: '',
        conversation: []
    };

    componentDidMount() {
        axios.get(`/getongoing?limit=10`)
            .then(res => {
                const people = res.data;
                this.setState({people});
            });
    }

    getConvForNum(phone_nm) {
        axios.get('/getconvfornum?customer_number=' + phone_nm.slice(1)).then(res => {
            const conversation = res.data;
            this.setState({conversation})
        });
        return (
            this.state.conversation.map(message =>
                <div>
                    <p>{message.from}</p>
                    <p>{message.body}</p>

                </div>
            )

        )
    }

    render() {
        return (

            this.state.people.map(person =>
                <>
                    <Accordion defaultActiveKey="0">
                        <Card>
                            <Card.Header>
                                <Accordion.Toggle as={Button} variant="button" eventKey="0">
                                    Converstaion random
                                </Accordion.Toggle>
                                Phone number: {person}
                            </Card.Header>
                            <Accordion.Collapse eventKey="0">
                                <Card.Body>
                                    {this.getConvForNum(person)}
                                    <Form.Control type = 'text'/>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    </Accordion>
                </>
            )

        )
    }
}

从“React”导入React；
从“axios”导入axios；
从“react bootstrap”导入{按钮、手风琴、卡片、表格}；
导出默认类PersonList扩展React.Component{
状态={
人员：[]，
客户编号：''，
日期：''，
对话：[]
};
componentDidMount（）{
axios.get（`/GetContinuous？limit=10`）
。然后（res=>{
const people=res.data；
这个.setState（{people}）；
});
}
getConvForNum（电话号码）{
get（'/getconvfornum？customer_number='+phone_nm.slice（1））。然后（res=>{
const conversation=res.data；
this.setState（{conversation}）
});
返回(
this.state.conversation.map（消息=>
{message.from}

{message.body}

)
)
}
render（）{
返回(
this.state.people.map（person=>
会话随机
电话号码：{person}
{this.getConvForNum（person）}
)
)
}
}

App.js

import {push as Menu} from 'react-burger-menu'
import React from "react";
import {BrowserRouter, Switch, Route, NavLink} from 'react-router-dom';
import Dashboard from "./Dashboard";
import AuthenticatedComponent from "./AuthenticatedComponent";
import Login from "./Login";
import OpenTickets from "./OpenTickets";
import ExportToLog from "./ExportToLog";
import LogOut from "./LogOut";
import '../css/slideBarNav.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../css/style.css';

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path="/login" component={Login}/>
                    <>
                        <Menu className='navBar'>
                            <NavLink exact to="/"  className='menu-item' activeClassName='active'>Home</NavLink>

                            <NavLink to="/opentickets" className='menu-item' activeClassName='active'>Open Tickets</NavLink>

                            <NavLink to="/exportlog" className='menu-item' activeClassName='active'>Export Log</NavLink>

                            <NavLink to ='/logout' className='menu-item'>Log Out</NavLink>
                        </Menu>
                        <AuthenticatedComponent>
                            <Route path="/" exact component={Dashboard}/>
                            <Route path="/opentickets" component={OpenTickets}/>
                            <Route path="/exportlog" component={ExportToLog}/>
                            <Route path='/logout' component={LogOut}/>
                        </AuthenticatedComponent>
                    </>
                </Switch>
            </BrowserRouter>
        );
    }
}

export default App;

从“反应汉堡菜单”导入{push as Menu}
从“React”导入React；
从“react router dom”导入{BrowserRouter，Switch，Route，NavLink}；
从“/Dashboard”导入仪表板；
从“/AuthenticatedComponent”导入AuthenticatedComponent；
从“/Login”导入登录名；
从“/OpenTickets”导入OpenTickets；
从“/ExportToLog”导入ExportToLog；
从“/LogOut”导入注销；
导入“../css/slideBarNav.css”；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“../css/style.css”；
类应用程序扩展了React.Component{
render（）{
返回(
家
公开票
导出日志
注销
);
}
}
导出默认应用程序；

不确定是什么导致了这个无限循环

---

我是react新手，所以我可能只是不理解渲染函数中的某些内容，您有一个

getConvForNum（person）

调用，它将执行get请求并设置状态，

SetState

将触发渲染函数调用，渲染将再次调用

getConvForNum（person）

，依此类推

您可以在设置状态之前将

this.state.conversation

与get调用返回的新值进行比较，以避免在此.setState（{conversation}）调用之前出现无限调用。您应该检查会话数组是否已更改