当我尝试更改页面时，react setState不起作用

Question

我不明白这里做错了什么，找不到任何解决方案
我希望你能帮助我。

我想onChange函数中的setState不工作，或者可能是这里的另一个问题
我想尽一切办法去理解这个问题，但我做不到。

我正在使用蚂蚁设计分页来更改页面。非常感谢。

componentDidMount() {
this.setState({
loading: true,
});
const endpoint = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=${this.state.currentPage}`;
this.getData(endpoint);
}

getData = (endpoint) => {
axios.get(endpoint).then((res) => {
this.setState({
movies: res.data.results,
mainImg: res.data.results[0].poster_path,
loading: false,
currentPage: res.data.page,
totalPages: res.data.total_pages,
});
console.log(res);

});
};

onChange = (page) => {
let endpoint = "";        
this.setState({ loading: true, currentPage: page });    
endpoint = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=${this.state.currentPage}`;    
this.getData(endpoint);
};

render() {
const { totalPages, currentPage, movies } = this.state;
return (
<div className="main-content">
<h1>home component</h1>
<div>
{movies.map((movie) => {
return (
<ul key={movie.id}>
<li>{movie.title}</li>
</ul>
);
})}
</div>
<div>
<Pagination
defaultCurrent={1}
total={totalPages}
current={currentPage}
showSizeChanger={false}
onChange={this.onChange}
/>
</div>
</div>
);
}
}

Answer 1

setState是异步

React setState未更新状态

在onChange函数中，当您更新端点变量时，使用page而不是this.state.currentPage(因为状态尚未更新(

然后，用this.render((结束onChange函数在状态变量更新后重新呈现您的JSX