类型为 Person | undefined 的 TypeScript Error (TS2345) 参数不能分配给 P

Question

我是打字稿的新手，不确定我在这里做错了什么

interface Person{
id:number;
name:string
}
export async function getPersonInfo(person: Person): Promise<Person>{
//some code here
return response.data.person
}
const someFunc = () => {
const [person, setPerson] = useState<Person>();
useEffect(() => {
getPersonInfo(person).then((data) => {
setPerson(data);
});
}, [person]);

在getPersonInfo中传递具有null或未定义值的接口实例似乎是问题所在。但是如果我使用 useState 传递一个接口数组 Person 如下，它可以工作

export async function getPersonInfo(person: Person[]): Promise<Person[]>{
//some code here
return response.data.person
}
const [persom, setPerson] = useState<Person[]>([])
useEffect(() => {
getPersonInfo(person: Person[]).then((data) => {
setPerson(data);
});

为什么它适用于数组而不是单个对象？

Answer 1

您在这里的问题是

const [person, setPerson] = useState<Person>();
vs
const [persom, setPerson] = useState<Person[]>([])

在第一个(出错的地方(中，person的初始值是未定义的，因此编译器将此理解为person可以是Person或未定义的。在第二个中，您将person初始化为空数组，因此编译器将其理解为表示它是一个Person数组，但其中没有Person对象。

真正的问题最终浮出水面：

export async function getPersonInfo(person: Person): Promise<Person>{
//some code here
return response.data.person
}

因为getPersonInfo收留了一个人。所以你要么需要首先确保有一个人，要么(不太可能理想(getPersonInfo接受一个Person | undefined。

useEffect(() => {
if (person) {
getPersonInfo(person).then((data) => {
setPerson(data);
});
}
}, [person]);

Answer 2

问题是useState()的召唤。由于您没有传递初始值，因此变量person一开始将未定义。在第二个代码中，将一个空数组传递给函数，以便该变量将是与类型Person[]匹配的空数组。

要解决此问题，您需要使用 Person 对象初始化状态或接受undefined作为函数的参数。

export async function getPersonInfo(person?: Person): Promise<Person>{
//some code here
return response.data.person
}

Answer 3

因为 person 的初始值未定义。

因此，在您从 api 调用中收到人员并对其进行设置之前，人员是未定义的。

作为一个数组，您将初始值设置为空数组 - 它是一个数组，只是空。但它并非没有定义。所以 Person[] 是一个有效的类型。