ReactJs如何显示带有更多加载选项的列表

Z时代
2024-01-10
分类：问答

我正试图显示待办事项清单，并带有更多加载选项。我正在应用限制。限制适用于列表。但是当我添加loadmore（）函数时。然后我收到错误

当我错了。任何人都可以建议我。这是我的代码todoList.jsx

var TodoList=React.createClass({
    render:function(){
    var {todos}=this.props;
    var limit = 5;
    function onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    }
    var renderTodos=()=>{
            return todos.slice(0,this.state.limit).map((todo)=>{
                return(
                        <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
                );
            });
    };
    return(
        <div>
            {renderTodos()}
            <a href="#" onClick={this.onLoadMore}>Load</a>
        </div>
        )
}
});
module.exports=TodoList;

回答：

首先定义limit的state变量使用getInitialState方法，你没有定义的限制，这就是为什么this.state.limit是null。

定义方法的所有functions外部render。

Arrow function与renderTodos不是必需的。

使用this关键字来调用这样的renderTodos方法：

{this.renderTodos()}

这样写：

var TodoList=React.createClass({
    getInitialState: function(){
        return {
            limit: 5
        }
    },
    onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    },
    renderTodos: function(){
        return todos.slice(0,this.state.limit).map((todo)=>{
            return(
                <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
            );
        });
    };
    render:function(){
        var {todos} = this.props;
        return(
            <div>
                {this.renderTodos()}
                <a href="#" onClick={this.onLoadMore}>Load</a>
            </div>
        )
    }
});