React+TypeScript如何将useState相关props正确传递给子组件

问题原因 #

你遇到的报错由三个问题共同导致：

• 属性命名不一致：父组件传递的更新函数属性名为setformEntry，子组件props类型定义中写的是setFormEntry，大小写不匹配
• 状态类型不兼容：父组件中formEntry的类型是IformEntry | undefined，子组件中定义的类型仅为IformEntry，没有兼容undefined的情况
• 更新函数类型不规范：直接用any定义更新函数类型，既丢失类型校验，也和实际传入的setter函数类型不匹配

解决方案 #

1. 首先从react包中导入状态更新函数的标准类型：

import { Dispatch, SetStateAction } from "react";

2. 修正子组件的props定义，你当前子组件props中声明的setFormList、formList两个属性父组件并未传递，不需要可以直接删除，需要的话可以标记为可选属性。修正后的完整子组件代码如下：

import { IformEntry } from "../interfaces/IformEntry";
import { Dispatch, SetStateAction } from "react";

interface FormulaireFooterProps {
  setformEntry: Dispatch<SetStateAction<IformEntry | undefined>>;
  formEntry: IformEntry | undefined;
  // 确有需要可以保留以下两个可选属性，不需要就删除
  // setFormList?: any;
  // formList?: any;
}

const FormulaireFooter = ({
  setformEntry,
  formEntry,
}: FormulaireFooterProps) => { 
// 业务逻辑
}

可选优化 #

如果你不想处理formEntry为undefined的情况，可以给父组件的useState设置符合IformEntry结构的初始值，这样子组件也不用兼容undefined类型：

// 父组件Home中的useState修改为
const [formEntry, setformEntry] = useState<IformEntry>({
  type: '',
  toFrom: '',
  details: '',
  amount: 0
});

对应子组件props中formEntry的类型可以直接简化为IformEntry。

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