何时读取React Router参数以加载REST API数据到Props？

嘿，我来帮你搞定这个React路由参数获取和redux-saga数据加载的问题！你遇到的核心痛点是组件复用（从一个合同跳转到另一个时，ContractForm不会重新挂载）导致生命周期方法触发时机不对，下面给你几个实用的解决方案，以及针对你疑问的解答：

这是类组件下最直接的方案，能覆盖组件挂载和参数更新两种场景：

import { connect } from 'react-redux';
import { fetchContract } from './actions';

class ContractForm extends React.Component {
  componentDidMount() {
    // 组件首次挂载时加载数据
    const contractId = this.props.match.params.id;
    this.props.fetchContract(contractId);
  }

  componentDidUpdate(prevProps) {
    // 对比前后路由参数，只有id变化时才重新加载数据
    const currentId = this.props.match.params.id;
    const prevId = prevProps.match.params.id;
    if (currentId !== prevId) {
      this.props.fetchContract(currentId);
    }
  }

  render() {
    const { contract, loading, error } = this.props;
    if (loading) return <div>加载中...</div>;
    if (error) return <div>加载失败：{error}</div>;
    return (
      // 渲染合同表单内容
      <form>
        <input value={contract?.name} />
        {/* 其他表单字段 */}
      </form>
    );
  }
}

// 从全局store映射数据到组件props
const mapStateToProps = (state) => ({
  contract: state.contracts.currentContract,
  loading: state.contracts.loading,
  error: state.contracts.error
});

// 映射action到props
const mapDispatchToProps = {
  fetchContract
};

export default connect(mapStateToProps, mapDispatchToProps)(ContractForm);

如果你的项目已经迁移到函数组件，React Router的useParams和Redux的useDispatch/useSelector组合会更清爽：

import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { fetchContract } from './actions';

const ContractForm = () => {
  // 获取路由id参数
  const { id } = useParams();
  const dispatch = useDispatch();
  // 从全局store取数据
  const { contract, loading, error } = useSelector(state => state.contracts);

  // 当id变化时自动触发数据加载
  useEffect(() => {
    dispatch(fetchContract(id));
  }, [id, dispatch]); // 依赖数组里放id，确保id变了就重新执行

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <form>
      <input value={contract?.name} />
      {/* 其他表单字段 */}
    </form>
  );
};

export default ContractForm;

1. 要不要通过监听导航事件加载数据？ #

其实没必要额外监听导航事件，因为路由参数变化会直接反映在组件的props（类组件）或useParams返回值（函数组件）中，通过对比参数变化触发数据加载更直接，代码也更简洁。

2. 运行时动态加载数据到props是不良设计吗？ #

完全不是！这种“按需加载”是CRUD场景中的最佳实践之一：

• 相比一次性加载所有合同数据，按需加载能减少初始请求体积，提升页面加载速度；
• 符合用户操作流程：用户选择某个合同后再加载对应详情，逻辑更合理。
  很多基础教程只展示初始化加载，是因为场景简单，但你的需求更贴近真实业务场景，完全没问题。

3. 为什么不用getDerivedStateFromProps？ #

getDerivedStateFromProps是用来将props同步到组件自身state的，而你的需求是把数据存到全局Redux store，所以应该通过触发action让saga处理API请求，再由reducer更新store，组件从store取数据即可，不需要用到这个生命周期方法。

为了让你更清晰，这里给个简单的saga示例，监听FETCH_CONTRACT_REQUEST action：

import { call, put, takeLatest } from 'redux-saga/effects';
import { fetchContractSuccess, fetchContractFailure } from './actions';
import api from './api'; // 你的REST API封装

// 处理API请求的worker saga
function* fetchContractSaga(action) {
  try {
    const contract = yield call(api.getContract, action.payload); // 调用API
    yield put(fetchContractSuccess(contract)); // 成功后dispatch成功action
  } catch (error) {
    yield put(fetchContractFailure(error.message)); // 失败后dispatch失败action
  }
}

// 监听action的watcher saga
export function* watchFetchContract() {
  yield takeLatest('FETCH_CONTRACT_REQUEST', fetchContractSaga); // 只处理最新的请求
}

对应的action创建函数：

export const fetchContract = (id) => ({
  type: 'FETCH_CONTRACT_REQUEST',
  payload: id
});

export const fetchContractSuccess = (contract) => ({
  type: 'FETCH_CONTRACT_SUCCESS',
  payload: contract
});

export const fetchContractFailure = (error) => ({
  type: 'FETCH_CONTRACT_FAILURE',
  payload: error
});

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