Axios.get() ReactJS

Question

I'm making simple To-Do App in ReactJS.For now I'm adding Routes I managed to implement .post method,but now I'm stuck on .get Method,it's being looped and is rendering over and over again. Here is what am I doing.

state = {
    inputValue: '',
    todos: [],
    currentPage: 1,
    pageCount: 1,
    itemsPerPage: 10,
};

getAll = () => {
    let {todos} = this.state
    axios
        .get("http://localhost:8080/", {
            todos:todos
        })
        .then((res) => {
            this.setState({todos:res.data})
        })
        .catch((err) => {
            console.log("err", err);
        });
};

render() {
    const {itemsPerPage, currentPage, todos} = this.state;
    const end = currentPage * itemsPerPage
    const start = end - itemsPerPage 
    const currentItems = todos.slice(start, end);
    return <div className={"App"}>
        <div className="App-header">
            <h2>Welcome to To-Do List App</h2>
        </div>
        <input ref={this.inpRef} onKeyPress={this.handleKeyPress} name={''} type='text'/>
        <button onClick={() => this.addItem()} className={'btn btn-primary'}>Add</button>
        <ul>

            {
                todos.length ?
                currentItems.map(todoItem => <ListItem
                    key={todoItem.id}
                    todoItem={todoItem}
                    deleteItem={this.deleteItem}
                    editItem={this.editItem}
                    submitEdit={this.submitEdit}
                    getAll = {this.getAll}
                />) :
                    null
            }
            <div>
                 {this.getAll()}
                {this.renderPagination()}
            </div>
        </ul>
    </div>
};
}

export default App;

All I want to do is to Render received data into <ul> and make it appear as li,But the problem is it is stuck in infinite loop and is updating page over and over again. Any suggestions?

Remove `this.getAll()` from the render function, it shouldn't be there at all; `render` function should be pure with no side-effects, like data fetching. — Drew Reese, Jun 12 '20 at 05:49
Okay thank you,how shall i call it only on first load of the page? — RoffyBC, Jun 12 '20 at 05:50
Well, call it whenever you need to, but from one of the lifecycle functions, typically `componentDidMount` and `componentDidUpdate`. — Drew Reese, Jun 12 '20 at 05:51

score 1 · Accepted Answer · answered Jun 12 '20 at 07:17

The reason for you the above code is causing a problem because here in the above code we are not using react-life cycle hooks properly and making HTTP calls in the render function. As this is the class-based component. You could try using componentDidMount() life cycle hook to make all the HTTP calls before the components load and componentUpdateMount() lifecycle hook after it updates.

If in case you are using functional components in react than in react 16 and above versions we now have react-hooks, these react hooks help us to make the same HTTP in useEffect() hook. You could read about it further from the react official website as well. I hope it will help :) https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/hooks-effect.html

Axios.get() ReactJS

1 Answers1

Linked