使用 setState 在 React JS 中 URL 未更新

Question

我正在使用 React JS 构建一个新闻应用程序。我正在使用 News API 来收集数据。我通过使用 setState 更新 URL 添加了下一个和上一个按钮来显示下一个新闻。但问题是 URL 没有更新。 URL 的一部分是 &page=1，我想将其更改为 &page=2，当我检查它发送 &page=NaN 时，我不知道为什么会这样。这是代码：-

    import React, { Component } from "react";
import NewsItems from "./NewsItems";
import PreviousIcon from "@material-ui/icons/ArrowBack";
import NextIcon from "@material-ui/icons/ArrowForward";

export default class News extends Component {
  constructor() {
    super();

    this.state = {
      articles: [],
      loading: false,
    };
  }

  async componentDidMount() {
    let url =
      "https://newsapi.org/v2/top-headlines?country=in&apiKey=myapikey&page=1&pageSize=20";

    let data = await fetch(url);

    let parsedData = await data.json();
    this.setState({ articles: parsedData.articles });
  }

  handlePrev = async () => {
    console.log("previous");

    let url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=myapikey&page=${
      this.state.page - 1
    }&pageSize=20`;

    let data = await fetch(url);

    let parsedData = await data.json();

    this.setState({
      page: this.state.page - 1,
      articles: parsedData.articles,
    });
  };

  handleNext = async () => {
    console.log("Next");

    let url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=myapikey&page=${
      this.state.page + 1
    }&pageSize=20`;

    let data = await fetch(url);

    let parsedData = await data.json();

    this.setState({
      page: this.state.page + 1,
      articles: parsedData.articles,
    });
  };

  render() {
    return (
      <div className="news">
        <h1 className="head">SpiceHunt - Top headings</h1>
        <div className="news-items">
          {this.state.articles.map((element) => {
            return (
              <NewsItems
                key={element.url}
                title={element.title}
                description={element.description}
                img={element.urlToImage}
                tag={element.author}
                newsUrl={element.url}
              />
            );
          })}
        </div>
        <div className="pg-btn">
          <button
            className="page-btn"
            disabled={this.state.page <= 1}
            type="button"
            onClick={this.handlePrev}
          >
            <PreviousIcon /> Previous
          </button>
          <button className="page-btn" type="button" onClick={this.handleNext}>
            Next <NextIcon />
          </button>
        </div>
      </div>
    );
  }
}


 

我是 React JS 的初学者，这是我在 Stackoverflow 中遇到的第一个问题。我非常希望我能得到解决方案。

Answer 1

请在初始状态下添加页面。

旧代码：

this.state = {
      articles: [],
      loading: false,
    };

更新代码：

this.state = {
      articles: [],
      loading: false,
      page: 1
    };

Answer 2

您必须使用 componentDidUpdate() 来与已更改的状态进行交互。所以在这种情况下，当state.page 与prevState.page 不同时，我使用组件确实更新了，所以如果该条件为真，那么我们告诉反应组件根据componentDidUpdate() 中的函数进行更新。我只是在下面创建了一些代码：

不要忘记使用spread operator 或... 在我们的组件中保持以前的状态。所以当我们更新状态或setState 它并没有删除我们之前的状态。

您可以在下面看到调整后的代码：

import React, { Component } from "react";
import NewsItems from "./NewsItems";
import PreviousIcon from "@material-ui/icons/ArrowBack";
import NextIcon from "@material-ui/icons/ArrowForward";

export default class News extends Component {
  constructor() {
    super();

    this.state = {
      articles: [],
      loading: false,
      page: 1
    };
  }

  async componentDidMount() {
    let url =
      "https://newsapi.org/v2/top-headlines?country=in&apiKey=myapikey&page=1&pageSize=20";

    let data = await fetch(url);

    let parsedData = await data.json();
    this.setState({ ...this.state, articles: parsedData.articles });
  }

  async componentDidUpdate(_, prevState) {
   if (this.state.page !== prevState.page) {
        let url = `https://newsapi.org/v2/top-headlines? 
        country=in&apiKey=myapikey&page=${
        this.state.page
        }&pageSize=20`;

       let data = await fetch(url);

       let parsedData = await data.json();
       this.setState({
        ...this.state,
        articles: parsedData.articles,
       });
    }
  }

  handlePrev = async () => {
    console.log("previous");

    this.setState({
      ...this.state,
      page: this.state.page - 1,
    });
  };

  handleNext = async () => {
    console.log("Next");

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

  render() {
    return (
      <div className="news">
        <h1 className="head">SpiceHunt - Top headings</h1>
        <div className="news-items">
          {this.state.articles.map((element) => {
            return (
              <NewsItems
                key={element.url}
                title={element.title}
                description={element.description}
                img={element.urlToImage}
                tag={element.author}
                newsUrl={element.url}
              />
            );
          })}
        </div>
        <div className="pg-btn">
          <button
            className="page-btn"
            disabled={this.state.page <= 1}
            type="button"
            onClick={this.handlePrev}
          >
            <PreviousIcon /> Previous
          </button>
          <button className="page-btn" type="button" onClick={this.handleNext}>
            Next <NextIcon />
          </button>
        </div>
      </div>
    );
  }
}