ReactJs如何显示带有更多加载选项的列表 [英] ReactJs how to show list with load more option

问题描述

我打算显示带有更多加载选项的待办事项列表.我正在应用限制.限制适用于列表.但是当我添加loadmore()函数时.然后我得到错误 this.state.limit为空.如果我错了，任何人都可以建议我.这是我的代码todoList.jsx

I am tring to show todo list with load more option. I am appling limit.Limit is apply to list.But when i add loadmore()function. then i get error this.state.limit is null Wher i am wrong.Any one can suggest me. here is my code 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;

推荐答案

更改:

1..首先使用 getInitialState 方法在 state 变量中定义 limit 限制，这就是为什么 this.state.limit 为 null 的原因.

1. First define the limit in state variable by using getInitialState method, you didn't define the limit, that's why this.state.limit is null.

2..在 render 方法之外定义所有功能.

2. Define all the functions outside of the render method.

3.不需要具有 renderTodos 的箭头功能.

3. Arrow function with renderTodos is not required.

4..使用 this 关键字来调用 renderTodos 方法，如下所示:

4. Use this keyword to call the renderTodos method like this:

{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>
        )
    }
});

这篇关于ReactJs如何显示带有更多加载选项的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！