ReactJS中如何在状态变更时重新发起API请求？

嘿，作为刚接触React类组件的新手，遇到这个问题太正常啦——我当初刚学的时候也踩过一模一样的坑😉

问题根源 #

你现在的DisplayData组件只在componentDidMount里调用API，而这个生命周期方法只在组件第一次挂载到DOM时执行一次。当父组件Searchform的状态变化、传递给子组件的props更新时，componentDidMount不会再次触发，所以自然不会重新发起请求。

解决方案：使用componentDidUpdate生命周期方法 #

componentDidUpdate会在组件更新（包括props变化、自身state变化）时触发，我们可以在这里对比前后的props，当和API请求相关的props发生变化时，重新调用API获取数据。

下面是修改后的DisplayData组件示例：

import React from 'react';

class DisplayData extends React.Component {
  // 初始化组件状态
  state = {
    data: [],
    loading: false,
    error: null
  };

  // 组件首次挂载时请求数据
  componentDidMount() {
    this.fetchGitHubData(this.props.searchKeyword);
  }

  // 组件更新时检查props变化，重新请求
  componentDidUpdate(prevProps) {
    // 关键：对比当前props和上一次的props，只有当搜索关键词变化时才重新请求
    if (this.props.searchKeyword !== prevProps.searchKeyword) {
      this.fetchGitHubData(this.props.searchKeyword);
    }
  }

  // 封装API请求逻辑
  fetchGitHubData = async (keyword) => {
    this.setState({ loading: true, error: null });
    try {
      // 调用GitHub搜索API
      const response = await fetch(`https://api.github.com/search/repositories?q=${keyword}`);
      if (!response.ok) {
        throw new Error('请求失败，请稍后重试');
      }
      const result = await response.json();
      this.setState({
        data: result.items,
        loading: false
      });
    } catch (err) {
      this.setState({
        error: err.message,
        loading: false
      });
    }
  };

  render() {
    const { loading, error, data } = this.state;

    if (loading) {
      return <div>正在加载数据...</div>;
    }

    if (error) {
      return <div className="error">出错了：{error}</div>;
    }

    return (
      <div className="data-container">
        <h3>搜索结果（共{data.length}个）</h3>
        <ul>
          {data.map(item => (
            <li key={item.id}>
              <a href={item.html_url} target="_blank" rel="noopener noreferrer">
                {item.name}
              </a>
              <p>{item.description?.slice(0, 100)}...</p>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default DisplayData;

重要注意事项 #

• 必须加props对比条件：如果不判断this.props.searchKeyword !== prevProps.searchKeyword，每次组件更新（比如自身state变化）都会触发API请求，容易导致无限循环和不必要的API调用。
• 封装请求逻辑：把API请求抽成单独的方法（比如fetchGitHubData），这样componentDidMount和componentDidUpdate都能复用，避免代码冗余。
• 处理加载和错误状态：加上loading和error状态能提升用户体验，避免用户不知道发生了什么。

如果你的父组件传递的props不是搜索关键词，而是其他影响API请求的参数，只需要把对比的props换成对应的字段就行啦~

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