Axios.get()ReactJS [英] Axios.get() ReactJS

问题描述

我在ReactJS中制作了一个简单的待办事项应用程序.目前，我添加了设法实现 .post 方法的Routes，但现在我却陷入了 .get 方法，它正在循环播放，并且一遍又一遍地渲染.这是我在做什么.

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;

我要做的就是将接收到的数据渲染到< ul> 中，并使其显示为 li ，但是问题是它陷入了无限循环并且正在一次又一次地更新页面.有什么建议吗?

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?

推荐答案

上面代码的原因导致了问题，因为在上面的代码中，我们没有正确使用react-life cycle钩子，并且没有在其中进行HTTP调用.渲染功能.因为这是基于类的组件.您可以尝试使用componentDidMount()生命周期挂钩在组件加载之前进行所有HTTP调用，并在组件更新之后使用componentUpdateMount()生命周期挂钩.

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.

如果您在react中使用的功能组件比react 16及更高版本中的功能组件高，那么我们现在有了react-hook，这些react钩子可以帮助我们在useEffect()钩子中创建相同的HTTP.您也可以从react官方网站上进一步了解它.我希望这会有所帮助:) https://reactjs.org/docs/react-component.html

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！