ページネーションは、2回目のクリックの後にここで

Question

に動作しますが、私のjsFiddle例です：あなたはページネーションの項目をクリックすると、あなたはそれが正しく動作していないことをhttps://jsfiddle.net/0se06am5/

class Pagination extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { current: 1 }; 
     this.items = ['a', 'b', 'c']; 
     this.filteredItems = []; 

     this.prev = this.prev.bind(this); 
     this.next = this.next.bind(this); 
     this.set = this.set.bind(this); 
     this.filter = this.filter.bind(this); 
    } 

    componentWillUpdate() { 
     this.filter(); 
    } 

    prev() { 
     this.setState({ current: this.state.current - 1}); 
    } 

    next() { 
     this.setState({ current: this.state.current + 1}); 
    } 

    set(val) { 
     this.setState({ current: val }); 
    } 

    filter() { 
     this.filteredItems = this.items.filter((i, idx) => { 
      return (idx + 1) === this.state.current; 
     }) 
    } 

    render() { 
     return (
      <div> 
       {this.filteredItems.map((i, idx) => { 
        return <span key={`item_${idx}`}>{i}</span>; 
       })}<br /> 

       <span onClick={this.prev}>prev</span> 

       <span onClick={this.set.bind(this, 1)}>1</span> 
       <span onClick={this.set.bind(this, 2)}>2</span> 
       <span onClick={this.set.bind(this, 3)}>3</span> 

       <span onClick={this.next}>next</span> 

       <br /><span>current: {this.state.current}</span> 
      </div> 
     ) 
    } 
} 

実現しました。

なぜfilter()メソッドが遅く実行されるのですか？ componentWillUpdate()の代わりに私はこのメソッドを移動する必要がありますか、何を書くべきですか？

Answer 1

componentWillUpdateは、ではありません。は、最初のレンダリングで実行されます。 （demo）それは状態自体を変更しないようにレンダリングするためにフィルタリングを移動して、コンポーネントがレンダリングされるたびに、それが実行する必要があります：

render() 
{ 
    const items = this.items.filter((i, idx) => { 
     return (idx + 1) === this.state.current; 
    }).map((i, idx) => { 
     return <span key={`item_${idx}`}>{i}</span>; 
    }); 
    return (
     <div> 

      {items} 

      <br /> 

      <span onClick={this.prev}>prev</span> 

      <span onClick={this.set.bind(this, 1)}>1</span> 
      <span onClick={this.set.bind(this, 2)}>2</span> 
      <span onClick={this.set.bind(this, 3)}>3</span> 

      <span onClick={this.next}>next</span> 

      <br /><span>current: {this.state.current}</span> 
     </div> 
    ) 
} 

あなたはまた、1つの.reduceコールに.filterと.map通話を組み合わせることができます（demo）：

const items = this.items.reduce((arr, i, idx) => { 
    if((idx + 1) === this.state.current) { 
     arr.push(
      <span key={`item_${idx}`}>{i}</span> 
     ); 
    } 

    return arr; 
}, []);