Question

我试图更新状态＆＃39; allMovieList＆＃39;渲染电影列表。

我们的想法是在我的GET请求中设置动态网址，方法是更新网页＆＃39;点击按钮时的状态。不幸的是，这并没有触发重新渲染，因为在componentDidMount（）方法中只发出一次请求。

state = {
    allMovieList: [],
    page: 1
}

componentDidMount() {
    this.changePage();
}

async changePage() {
    try {
        const response = await axios.get(`https://api.themoviedb.org/4/discover/movie?api_key=${apiKey}&page=${this.state.page}`);
        const movieList = response.data.results.slice(0, 10);
        const movies = movieList.map(movie => movie);
        const totalPages = response.data.total_pages;
        this.setState({
            ...this.state,
            allMovieList: movies,

        })
    } catch (event) {
        console.log(event);
    }
}

onNextPage = () => {
    this.setState((previousState, currentProps) => {
        return { page: previousState.page + 1 };
    });
}

render() {

    return (
        <div className='MovieList'>
            ...
            <button onClick={this.onNextPage}></button>
        </div>
    );
}

为了解决这个问题，我尝试在onNextPage（）函数中调用changePage（）函数。

onNextPage = () => {
    this.setState((previousState, currentProps) => {
        return { page: previousState.page + 1 };
    });
    this.changePage();
}

这部分解决了这个问题，但由于某种原因，下一页实际上只在第二次点击时呈现！我还注意到每次点击都会重新渲染我的组件两次。

我也尝试在componentDidUpdate（）中调用changePage（）函数，这解决了问题，但现在我的应用程序不断重新渲染，这会导致巨大的性能问题。

任何人都可以帮我吗？非常感谢！

Answer 1

选项1）使用setState的回调函数：

this.setState((previousState, currentProps) => {
    return { page: previousState.page + 1 };
}, this.changePage); // state will be updated when this gets called

选项2）使用函数参数：

async changePage(page) {
  try {
    const response = await 
      axios.get(`https://api.themoviedb.org/4/discover/movie?page=${page}`);
      ...
  }
}

...
onNextPage = () => {
  this.setState((previousState, currentProps) => {
    const page = previousState.page + 1
    this.changePage(page);
    return { page };
  });
}

React：ComponentDidMount中的动态GET URL

1 个答案: