1
我想通过点击一些调用方法来增加状态值的文本来做分页。状态值然后传递给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
});
}
你能给我一个从我的代码中我将如何使用componentDid更新的例子?我不太熟悉它,并会非常感激。 – Milos
好吧给我一秒 –
我得到了分页工作,但它似乎是在一个无限循环,没有我甚至点击下一页按钮。 NVM我知道了,谢谢你的帮助,我不得不添加一个if条件的componentdidmount来检查状态是否改变。 – Milos