javascript - react : function sending infinity GET requests

Question

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

        )
    }
}

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;

不确定是什么导致了这个无限循环 我是 react 新手，所以可能我只是不明白一些事情

Answer 1

在渲染函数中，您有 getConvForNum(person) 调用，它将执行获取请求并设置状态， SetState 将触发 render 函数调用，render 将再次调用 getConvForNum(person) 依此类推。

您可以在设置状态之前将 this.state.conversation 与 get 调用的新返回值进行比较，以避免无限调用