Реагирует: функция отправки бесконечных GET-запросов - PullRequest
Новая
       3

Реагирует: функция отправки бесконечных GET-запросов

0 голосов
/ 03 февраля 2020

Компонент, который выбирает данные с сервера по getConvForNum, но каким-то образом он входит в бесконечное число l oop. Даже если я сохраню только 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;

Не уверен, что вызвало этот бесконечный цикл, я новичок в реакции, поэтому, вероятно, я просто что-то не понял

1 Ответ

1 голос
/ 03 февраля 2020

Внутри функции рендеринга у вас есть вызов getConvForNum(person), который выполнит запрос get и установит состояние, SetState вызовет вызов функции рендеринга, render снова вызовет getConvForNum(person) и т. Д.

Вы можете сравнить this.state.conversation с новым возвращенным значением из вызова get перед установкой состояния, чтобы избежать бесконечных вызовов

...