useRef()引发TS2322:number无法赋值给undefined类型报错修复

TS2322报错的核心原因是调用useRef()时未传入初始值、也未声明泛型类型，TS会自动将ref.current的类型推断为undefined，后续给它赋值number类型的计数器值时自然会触发类型不匹配错误。
原代码除了类型问题，还有两处逻辑错误：

• 执行顺序错误：在useEffect中先更新ref存储的值为最新计数器值，再做新旧值比较，会导致新旧值永远相等，判断逻辑完全失效
• 判断条件错误：用新旧值相等作为调用removeValues的触发条件，完全不符合计数器增减的比较逻辑，相等场景是重复渲染/初始化，不需要触发增减操作
  之前尝试修改useState初始值类型为0 | undefined属于错找问题根源，计数器本身始终是数字类型，修改state类型反而会破坏加减运算逻辑。

• 给useRef显式声明number泛型，传入和计数器初始值一致的0作为初始值，TS即可正确识别ref.current的类型，消除类型报错
• 调整useEffect内执行顺序：先取出ref存储的旧值完成比较、调用对应方法后，再更新ref为最新的计数器值，供下一次渲染作为旧值使用
• 修正判断条件：旧值小于新值时是新增操作，调用addValues；旧值大于新值时是删除操作，调用removeValues；新旧值相等时不做任何操作

// 注意替换成你项目中实际的类型定义
type FormGroupProps = {
  // 你的组件props类型
}
type SectionType = {
  section: SectionTitle
}

const FormGroup = (prop: FormGroupProps) => {
  const [subjectAddressCounter, setSubjectAddressCounter] = useState<number>(0);

  // 显式指定ref的类型为number，初始值和计数器初始值保持一致
  const prevSubjectAddressCounterRef = useRef<number>(0);

  useEffect(() => {
    const prevCount = prevSubjectAddressCounterRef.current;

    // 先基于旧值做判断
    if (prevCount < subjectAddressCounter) {
      addValues();
    }
    if (prevCount > subjectAddressCounter) {
      removeValues();
    }

    // 判断逻辑执行完成后，再更新ref存储的值为最新计数
    prevSubjectAddressCounterRef.current = subjectAddressCounter;
  }, [subjectAddressCounter]);


  const addSection = (section: SectionType) => {
    if (section.section === SectionTitle.subjectAddress) {
      setSubjectAddressCounter(prevCount => prevCount + 1);
    }
  };

  const removeSection = (section: SectionType) => {
    if (section.section === SectionTitle.subjectAddress) {
      setSubjectAddressCounter(prevCount => prevCount - 1);
    }
  };

  return (
    {/* 其余业务组件代码 */}
    <button onClick={() => addSection(form)}>新增地址</button>
    <button onClick={() => removeSection(form)}>删除地址</button>
  )
}

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