如何将含UNSAFE_componentWillReceiveProps的React类组件转为函数组件？

下面是把你的类组件转换成函数组件的完整代码，附带对应逻辑的说明：

import React, { useEffect } from 'react';

function NeedsApprovalEditTransactionInfoContainer(props) {
  // 对应原组件的 componentDidMount：组件挂载时执行一次
  useEffect(() => {
    props.needsApprovalTransactionManagementRules(props.expenseReportId);
  }, [props.expenseReportId]); // 依赖expenseReportId，当该值变化时重新执行，和原逻辑保持一致

  // 对应原组件的 UNSAFE_componentWillReceiveProps：监听updateAllocationSuccess的变化
  useEffect(() => {
    // 当updateAllocationSuccess变为true时执行后续操作
    if (props.updateAllocationSuccess) {
      props.updateNeedsApprovalAllocationStatus(false);
      props.route.params.refreshSelf();
      props.navigation.goBack();
    }
  }, [props.updateAllocationSuccess, props.updateNeedsApprovalAllocationStatus, props.route.params.refreshSelf, props.navigation.goBack]);

  // 若原组件是无UI的容器组件，直接返回null即可；若有渲染内容替换为对应JSX
  return null;
}

关键逻辑对应说明： #

• componentDidMount → 第一个useEffect，通过空依赖或指定expenseReportId作为依赖，确保组件挂载时执行一次初始化逻辑。
• UNSAFE_componentWillReceiveProps → 第二个useEffect，监听updateAllocationSuccess的变化，当该属性变为true时触发原类组件中的操作逻辑。
• 函数组件无需使用this，直接通过参数props访问所有传入的属性和方法。

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