React JS使用setState更新请求URL时page参数变为NaN如何解决

核心问题 #

你遇到页码变成NaN的原因是没有在组件的state中初始化page字段，初始状态下this.state.page的值为undefined，对undefined做加减运算会直接得到NaN。

修改步骤 #

1. 首先修改构造函数中的state初始化配置，添加page字段，初始值设为1，和你首次请求的页码保持一致：

constructor() {
  super();
  this.state = {
    articles: [],
    loading: false,
    page: 1 // 新增此行初始化页码
  };
}

2. （可选优化）在componentDidMount请求完成后的setState中同步更新page值，保持逻辑一致性：

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,
    page: 1
  });
}

修改完成后，this.state.page就会始终是合法的数字，拼接URL时不会再出现NaN的问题，同时你代码中原本写的上一页按钮禁用逻辑（disabled={this.state.page <= 1}）也会正常生效。

额外优化建议 #

• 可以在发起请求前把loading设为true，请求结束后设为false，渲染时根据loading状态展示加载提示，避免用户重复点击按钮
• 可以在接口返回中拿到totalResults字段计算总页数，给下一页按钮也加上超过总页数时的禁用逻辑，避免发起无效请求

内容的提问来源于stack exchange，提问作者Moksh Singh Dangi