React: function sending infinity GET requests

Question

Component that fetches data from a server on getConvForNum, but somehow it enters an infinite loop. Even if i keep only render() and this function it keep sending GET requests to server.

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

        )
    }
}

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;

Not sure what cause this infinity loop I'm new in react so probably i just didn't understand something

Answer 1

Inside the render function you have the getConvForNum(person) call which will do the get request and set the state, SetState will trigger render function call, render will call getConvForNum(person) again and so on..

You can compare this.state.conversation to the new returned value from the get call before setting state to avoid the infinite calls