Question

我在ReactJS中制作了一个简单的To-Do App。目前，我添加了设法实现.post方法的Routes，但是现在我仍然停留在.get方法上，它正在循环并一遍又一遍地渲染。这是我在做什么。

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，但是问题是它陷入了无限循环，并一次又一次地更新页面。有什么建议吗？

Answer 1

上面代码的原因导致了问题，因为在上面的代码中，我们没有正确使用react-life cycle挂钩并在render函数中进行HTTP调用。因为这是基于类的组件。您可以尝试使用componentDidMount（）生命周期挂钩在组件加载之前进行所有HTTP调用，并在组件更新之后使用componentUpdateMount（）生命周期挂钩。

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

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

Axios.get（）ReactJS

1 个答案: