Javascript 反应状态未更新/增加的问题

我试图通过单击一些文本来进行分页，这些文本调用一个方法来增加状态值。然后将状态值传递给axios调用，axios调用将调用下一页。然而，我注意到，当状态从render函数的console.log中获得增量时，axios调用不会使用新的状态值再次被调用。有人知道我怎么解决这个问题吗

构造函数（道具）{
超级（道具）；
此.state={
人员：[]，
行星：[]，
页码：1
};
this.pageIncrementer=this.pageIncrementer.bind（this）；
}
组件willmount（）{
让page=this.state.page；
axios({
方法：“GET”，
网址：`http://localhost:3008/people?_page=${page}&_limit=10`
})。然后（（响应）=>{
这是我的国家({
人物：回应
});
}).catch（（错误）=>{
console.log（'axios呼叫人员卡中有错误：'，错误）；
})
axios({
方法：“GET”，
网址：`http://localhost:3008/planets?_page=${page}&_limit=10`
})。然后（（响应）=>{
这是我的国家({
行星：回应
});
}).catch（（错误）=>{
console.log（'卡axios调用planets时出错：'，错误）；
})
}
页面递增器（）{
这是我的国家({
页面：this.state.page+1
});
}

组件将只装载一次

调用，您需要

componentdiddupdate

让getData=（）=>Math.random（）；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）
此.state={
名称：“”
};
}
组件willmount（）{
console.log（'componentWillMount'）
}
componentDidUpdate（）{
console.log（'componentDidUpdate'）
}
手变（e）{
这是我的国家({
名称：this.props.getData（）
});
}
render（）{
返回
{this.state.name}
股份有限公司
;
}
}
React.render（，document.getElementById（'container'）；

编辑（替代方式）：

让getData=（）=>Math.random（）；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.makeRequest=this.makeRequest.bind（this）
此.state={
页码：1，
名称：“”
};
}
makeRequest（下一个）{
取（'https://jsonplaceholder.typicode.com/posts/“+this.state.page）
.那么(
结果=>{
console.log（'do'）
返回result.json（）}
)
.那么(
（resp）=>this.setState({
名称：resp，页面：this.state.page+1}）
)
}
render（）{
返回
{this.state.name}
要求
;
}
}
React.render（，document.getElementById（'container'）；

组件将只装载一次

调用，您需要

componentdiddupdate

让getData=（）=>Math.random（）；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）
此.state={
名称：“”
};
}
组件willmount（）{
console.log（'componentWillMount'）
}
componentDidUpdate（）{
console.log（'componentDidUpdate'）
}
手变（e）{
这是我的国家({
名称：this.props.getData（）
});
}
render（）{
返回
{this.state.name}
股份有限公司
;
}
}
React.render（，document.getElementById（'container'）；

编辑（替代方式）：

让getData=（）=>Math.random（）；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.makeRequest=this.makeRequest.bind（this）
此.state={
页码：1，
名称：“”
};
}
makeRequest（下一个）{
取（'https://jsonplaceholder.typicode.com/posts/“+this.state.page）
.那么(
结果=>{
console.log（'do'）
返回result.json（）}
)
.那么(
（resp）=>this.setState({
名称：resp，页面：this.state.page+1}）
)
}
render（）{
返回
{this.state.name}
要求
;
}
}
React.render（，document.getElementById（'container'）；

能否从我的代码中举出一个例子，说明如何使用componentDid Update？我对它不太熟悉，非常感谢。我正在进行分页，但它似乎处于无限循环中，我甚至没有单击“下一页”按钮。NVM我知道了，谢谢你的帮助，我必须在componentdidmount中添加一个if条件来检查状态是否发生了变化。你能给我一个代码示例，说明我如何使用componentDid更新吗？我对它不太熟悉，非常感谢。我正在进行分页，但它似乎处于无限循环中，我甚至没有单击“下一页”按钮。NVM我明白了，谢谢你的帮助，我必须在componentdidmount中添加一个if条件来检查状态是否发生了变化。

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'));