Javascript 如何使用“加载更多”选项显示列表

我正试图用“加载更多”选项显示待办事项列表。我正在应用limit。limit应用于list。但当我添加loadmore（）函数时。然后，当我出错时，我得到错误this.state.limit为null。任何人都可以建议我。 这是我的密码 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;

var TodoList=React.createClass({
render:function（）{
var{todos}=this.props；
风险价值限额=5；
函数onLoadMore（）{
这是我的国家({
限制：this.state.limit+5
});
}
var rendertos=（）=>{
返回todos.slice（0，this.state.limit）.map（（todo）=>{
返回(
);
});
};
返回(
{renderTodos（）}
)
}
});
module.exports=TodoList；

更改：

1。首先使用

getInitialState

方法在

state

变量中定义

限制

，您没有定义限制，这就是

此.state.limit

为

null

的原因

2.定义

渲染

方法之外的所有

函数

3.

带
renderdos
的箭头功能是不需要的

4.使用
this
关键字调用
renderdos
方法，如下所示：

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

这样写：

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

var TodoList=React.createClass({
getInitialState:函数（）{
返回{
限额：5
}
},
onLoadMore（）{
这是我的国家({
限制：this.state.limit+5
});
},
RenderToOS:函数（）{
返回todos.slice（0，this.state.limit）.map（（todo）=>{
返回(
);
});
};
render:function（）{
var{todos}=this.props；
返回(
{this.renderTodos（）}
)
}
});
这是一个无需点击的按钮

大家都知道，react components有一个函数
componentDidMount（）
，当该组件的模板呈现到DOM中时，会自动调用该函数。我使用了相同的函数将scroll的事件监听器添加到我们的div iScroll中。
元素的
scrollTop
属性将找到滚动位置，并将其与
clientHeight
属性一起添加。
接下来，if条件将检查这两个属性的相加是否大于或等于滚动条高度。如果该条件为真，则将运行
loadMoreItems
功能

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 10,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >=this.refs.iScroll.scrollHeight){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 3000);
  }

  render() {
    return (
      <div ref="iScroll" style={{ height: "200px", overflow: "auto" }}>
        <ul>
          {this.displayItems()}
        </ul>

        {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}

      </div>
    );
  }
}

类布局扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：10，
加载状态：false
};
}
componentDidMount（）{
this.refs.iScroll.addEventListener（“滚动”（（）=>{
如果（this.refs.iScroll.scrollTop+this.refs.iScroll.clientHeight>=this.refs.iScroll.scrollHeight）{
this.loadMoreItems（）；
}
});
}
displayItems（）{
var项目=[]；
对于（var i=0；iItem{i}）；
}
退货项目；
}
loadMoreItems（）{
this.setState（{loadingState:true}）；
设置超时（（）=>{
this.setState（{items:this.state.items+10，loadingState:false}）；
}, 3000);
}
render（）{
返回(

{this.displayItems（）}

{this.state.loadingState？
正在加载更多项目。
：“”
);
}
}

谢谢Mayank Shukla Sir这种方法的问题是，所有达到
限制的TODO都将被渲染。假设您有一个书籍列表，每个书籍都有自己的图像等。每次单击“加载更多”按钮时，都会呈现所有书籍。关于如何只渲染添加的项目有什么建议吗？我们可以在
Todo
组件中使用
shouldComponentUpdate
生命周期方法，并跳过旧项目的渲染。
.filter（（e，i）=>i>=0&&i