ReactJs負荷の多いリストを表示する方法

Question

負荷の多いオプションを表示するようにしています。私はlimit.Limitをapplingしてlist.Butに適用されます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; 

Answer 1

変更：

1.まずgetInitialStateメソッドを使用してstate変数にlimitを定義し、あなたが制限を定義していない、それが理由ですthis.state.limitはnullです。

renderメソッドの外のfunctionsをすべて定義します。

3,Arrow functionと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> 
     ) 
    } 
});