React类组件切换路由后未调用API渲染内容问题求助

问题原因分析 #

1. Router结构错误：你的Navbar组件在Router外部，导致Link导航虽然修改了URL，但Router无法正确触发组件树的更新。
2. API调用时机单一：News组件仅在componentDidMount中调用API，该生命周期仅在组件首次挂载时执行。若组件被复用（未设置唯一key或key重复），即使category props变化，也不会重新触发API请求。

解决方案 #

方案1：修正Router结构（推荐）

将Navbar移入Router内部，确保路由导航能正确触发组件更新，同时保留每个News组件的唯一key：

修改App.js：

render() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" exact element={<News key="general" category={'general'} />} />
        <Route path="/health" exact element={<News key="health" category={'health'} />} />
        <Route path="/science" exact element={<News key="science" category={'science'} />} />
      </Routes>
    </Router>
  )
}

此方案中，路由切换时，不同key的News组件会被卸载并重新挂载，自然触发componentDidMount中的API调用。

方案2：监听Props变化触发API请求

若希望复用News组件实例，可通过componentDidUpdate监听category props的变化，重新调用API：

修改News.js：

async componentDidMount() {
  await this.fetchNews();
}

async componentDidUpdate(prevProps) {
  // 当category属性变化时，重新获取对应分类的新闻
  if (prevProps.category !== this.props.category) {
    await this.fetchNews();
  }
}

// 提取API请求逻辑为独立方法，便于复用
async fetchNews() {
  this.setState({ isLoading: true });
  const url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=<MYAPIKEY>`;
  
  try {
    const response = await fetch(url);
    const data = await response.json();
    this.setState({
      totalRowCount: data.totalResults,
      articles: data.articles,
      isLoading: false
    });
  } catch (error) {
    console.error('新闻数据获取失败:', error);
    this.setState({ isLoading: false });
  }
}

render() {
  // 原渲染逻辑保持不变
  return (
    <div>
        <div className="container-fluid my-3">
          <div className="d-flex flex-wrap justify-content-center align-items-center">
            {this.state.articles.map((element) => {
              return <div key={element.url}>
                <NewsItem title={element.title} description={element.description} imageUrl={element.urlToImage} newsUrl={element.url} />
              </div>
            })}
          </div>
        </div>
    </div>
  )
}

此方案中，无论组件是否重新挂载，只要category props变化，就会重新请求对应分类的新闻数据。

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