React JS中Bootstrap搜索表单无法触发News API查询如何解决

问题根因 #

1. Home组件的handleSubmit方法里只做了阻止默认提交行为，没有触发新闻数据的重新加载逻辑
2. News组件当前只会在首次挂载时调用componentDidMount请求数据，后续父组件传入的query属性变化时，不会自动触发重新请求
3. News组件的key固定为general，React会认为是同一个组件实例，不会主动销毁重建触发新的请求

具体修改步骤 #

第一步：修改Home.js #

1. 调整handleSubmit逻辑

handleSubmit = (event) => {
  event.preventDefault();
  // 提交后自动滚动到新闻区域，不需要可以删掉这行
  document.getElementById('news_section').scrollIntoView({behavior: 'smooth'});
};

2. 修改News组件的key属性

让key跟随query变化，保证query更新时News组件会重新挂载触发请求：

<News
  key={this.state.query || "general"} // 替换原固定的"general"
  pageSize={this.state.pageSize}
  country="in"
  category={this.state.category}
  query={this.state.query}
/>

第二步：修改News.js #

1. 新增componentDidUpdate生命周期，监听query变化自动重新请求

async componentDidUpdate(prevProps) {
  // 只有query发生变化时才重新请求数据，避免无效请求
  if (prevProps.query !== this.props.query) {
    this.setState({ loading: true, page: 1 });
    let url = ""
    if (this.props.query) {
      url = `https://newsapi.org/v2/top-headlines?q=${this.props.query}&country=${this.props.country}&pageSize=${this.props.pageSize}&apiKey=myapikey`;
    } else {
      url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&pageSize=${this.props.pageSize}&apiKey=myapikey`;
    }
    let data = await fetch(url);
    let parsedData = await data.json();
    this.setState({
      articles: parsedData.articles,
      totalResults: parsedData.totalResults,
      loading: false,
      disableNextButton: false
    });
  }
}

2. 修复componentDidMount里的多余loading设置

原代码里请求前已经设置了loading为true，请求发送后又重复设置了一次loading为true，删掉多余的那行即可：

async componentDidMount() {
  this.setState({ loading: true });
  let url = ""
  if (this.props.query) {
    url = `https://newsapi.org/v2/top-headlines?q=${this.props.query}&country=${this.props.country}&pageSize=${this.props.pageSize}&apiKey=myapikey`;
    
  } else {
    url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&pageSize=${this.props.pageSize}&apiKey=myapikey`;
  }
  let data = await fetch(url);
  // 删掉下面这行重复的loading设置
  // this.setState({ loading: true });
  let parsedData = await data.json();
  this.setState({
    articles: parsedData.articles,
    totalResults: parsedData.totalResults,
    loading: false,
  });
}

可选优化 #

可以把拼接请求URL的逻辑抽成公共方法，避免在componentDidMount、componentDidUpdate、翻页方法里重复写相同的代码，减少后期维护成本。

内容的提问来源于stack exchange，提问作者Mindjacker_101