問題與反應狀態不更新/遞增

Question

我想通過點擊一些調用方法來增加狀態值的文本來做分頁。狀態值然後傳遞給axios調用，然後調用下一頁。不過，我注意到，雖然狀態在渲染函數的console.log中增加了，但axios調用不會再次使用新的狀態值調用。任何人有任何想法我可以解決這個問題？

constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     people: [], 
 
     planets: [], 
 
     page: 1 
 
    }; 
 
    this.pageIncrementer = this.pageIncrementer.bind(this); 
 
} 
 

 
componentWillMount() { 
 
    let page = this.state.page; 
 
    axios({ 
 
     method: 'GET', 
 
     url: `http://localhost:3008/people?_page=${page}&_limit=10` 
 
    }).then((response) => { 
 
     this.setState({ 
 
      people: response 
 
     }); 
 
    }).catch((error) => { 
 
     console.log('There is an error in the Card axios call for people: ', error); 
 
    }) 
 
    axios({ 
 
     method: 'GET', 
 
     url: `http://localhost:3008/planets?_page=${page}&_limit=10` 
 
    }).then((response) => { 
 
     this.setState({ 
 
      planets: response 
 
     }); 
 
    }).catch((error) => { 
 
     console.log('There is an error in the Card axios call for planets: ', error); 
 
    }) 
 
} 
 

 
pageIncrementer() { 
 
    this.setState({ 
 
     page: this.state.page + 1 
 
    }); 
 
}

Answer 1

componentWillMount只能調用一次，你需要componentDidUpdate https://facebook.github.io/react/docs/react-component.html#componentdidupdate

let getData =() => Math.random(); 

class Example extends React.Component{ 
     constructor(props) { 
      super(props); 
      this.handleChange = this.handleChange.bind(this) 
      this.state = { 
       name: '' 
      }; 
     } 

     componentWillMount(){ 
      console.log('componentWillMount') 
     } 

     componentDidUpdate(){ 
      console.log('componentDidUpdate') 
     } 

     handleChange(e) { 
      this.setState({ 
      name: this.props.getData() 
      }); 
     } 


     render() { 
      return <div className="widget"> 
      {this.state.name} 
      <button onClick={this.handleChange}>Inc</button> 

      </div>; 
     } 
     } 

     React.render(<Example getData={getData}/>, document.getElementById('container')); 

編輯（另一種方法）：

let getData =() => Math.random(); 

class Example extends React.Component{ 
     constructor(props) { 
      super(props); 
      this.makeRequest = this.makeRequest.bind(this) 
      this.state = { 
       page:1, 
       name:'' 
      }; 
     } 

     makeRequest(next){ 
      fetch('https://jsonplaceholder.typicode.com/posts/'+this.state.page) 
      .then(
       result => { 
       console.log('do') 
       return result.json()} 
      ) 
      .then(
       (resp) => this.setState({ 
       name:resp, page:this.state.page+1}) 
      ) 
     } 


     render() { 
      return <div className="widget"> 
      {this.state.name} 
      <button onClick={this.makeRequest}>Request</button> 

      </div>; 
     } 
     } 

     React.render(<Example getData={getData}/>, document.getElementById('container'));