React组件中调用fetchRuns获取用户数据的正确时机：componentDidMount、componentDidUpdate还是其他位置？

你遇到的核心问题很典型：componentDidMount时userId还未从Redux store中加载完成，而直接在componentDidUpdate中调用fetchRuns会因为请求返回后更新store、触发组件重新渲染，进而形成无限循环。下面给你两种具体的解决方案：

方案一：在componentDidUpdate中添加精准判断条件 #

我们只需要在组件更新时，判断当前userId有效且userId发生变化/还没有获取过数据时，才发起请求。这样既能避免循环，又能保证数据及时加载：

class Runs extends React.Component {
  componentDidMount() {
    // 组件挂载时如果userId已经就绪，直接请求数据
    if (this.props.userId) {
      this.props.fetchRuns(this.props.userId);
    }
  }

  componentDidUpdate(prevProps) {
    // 只有当userId存在、且和之前的userId不同，或者还没有任何运行记录时才发起请求
    if (
      this.props.userId &&
      (this.props.userId !== prevProps.userId || this.props.runs.length === 0)
    ) {
      this.props.fetchRuns(this.props.userId);
    }
  }

  // ... 其余renderRuns、render方法保持不变
}

方案二：用本地状态跟踪请求状态（更精细控制） #

如果需要更明确地控制请求发起时机，可以在组件内部维护一个状态，标记是否已经发起过请求，避免重复调用：

class Runs extends React.Component {
  state = {
    hasInitiatedFetch: false
  };

  componentDidMount() {
    this.triggerFetch();
  }

  componentDidUpdate(prevProps) {
    // 如果userId发生变化，重置请求状态并重新请求
    if (this.props.userId !== prevProps.userId) {
      this.setState({ hasInitiatedFetch: false }, this.triggerFetch);
    }
  }

  triggerFetch = () => {
    const { userId, fetchRuns, runs } = this.props;
    // 满足userId存在、未发起过请求、无数据三个条件才请求
    if (userId && !this.state.hasInitiatedFetch && runs.length === 0) {
      fetchRuns(userId);
      this.setState({ hasInitiatedFetch: true });
    }
  };

  // ... 其余renderRuns、render方法保持不变
}

额外性能优化建议 #

你当前的renderRuns方法中，每次渲染都会对runs数组执行排序操作，这会导致不必要的组件重渲染。建议把排序逻辑放到mapStateToProps中，让排序仅在store中的runs数据变化时执行：

function mapStateToProps(state) {
  const runs = Object.values(state.runs);
  // 在mapStateToProps中完成排序，避免每次渲染重复计算
  const sortedRuns = runs.sort((a, b) => new Date(b.runDate) - new Date(a.runDate));
  return {
    runs: sortedRuns,
    userId: state.auth.userId
  };
}

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