TypeScript函数组件中如何将含nextProps的useEffect从JSX改写为TSX

你这段代码的核心问题是对useEffect的用法理解有误：React 中useEffect的回调函数本身不会传入nextProps参数，这是class组件生命周期的旧写法习惯，和是否是TSX无关，先修正用法再适配TS规范即可。

第一步：定义Props类型 #

首先给组件Props定义明确的TS类型，避免隐式any报错：

// 根据你的业务实际调整字段类型
interface SelectedProviderJob {
  providerNumber: string;
  // 其他该对象包含的字段
}

interface ComponentProps {
  selectedProviderJob?: SelectedProviderJob;
  // 其他组件接收的props字段
}

第二步：改写符合规范的TSX代码 #

import { useState, useEffect } from 'react';

const YourFunctionalComponent = (props: ComponentProps) => {
  // 假设你原代码里的selectedProviderJob是本地维护的状态，按实际情况调整类型
  const [selectedProviderJob, setSelectedProviderJob] = useState<SelectedProviderJob | null>(null);
  const [state, setState] = useState({
    trackingEventOrder: "",
    nextNote: "",
    selectedSubpayers: [] as string[], // 提前声明数组内元素类型，规避TS推导错误
    approvalDate: null as Date | null,
    followUpDate: null as Date | null,
    isApproved: false,
    isPending: false,
    providerNumber: "",
  });

  useEffect(() => {
    // 依赖触发时props已经是最新值，直接读取即可，不需要nextProps参数
    if (props.selectedProviderJob !== selectedProviderJob) {
      setState({
        trackingEventOrder: "",
        nextNote: "",
        selectedSubpayers: [],
        approvalDate: null,
        followUpDate: null,
        isApproved: false,
        isPending: false,
        // 用可选链处理可能为空的情况，避免运行时报错和TS类型警告
        providerNumber: props.selectedProviderJob?.providerNumber ?? "",
      });
      // 同步本地状态，避免重复触发effect
      setSelectedProviderJob(props.selectedProviderJob ?? null);
    }
  // 只放入必要的依赖项，不要传入整个props，减少不必要的effect触发
  }, [props.selectedProviderJob, selectedProviderJob]);

  // 剩余组件逻辑
  return <></>;
}

注意事项 #

• 不要将整个props放入依赖数组，精准声明需要监听的属性即可，同时可以满足ESLint依赖校验规则的要求
• 对可能为空的属性使用可选链?.和空值合并运算符??做边界处理，符合TS的类型安全要求
• 如果selectedProviderJob也是来自props而非本地状态，可以直接从依赖数组里移除，只保留props.selectedProviderJob即可，对比逻辑也可以简化

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