'string | 类型的参数undefined' 不能分配给类型为 'string' 的参数。 “未定义”类型不能分配给“字符串”类型

Question

我在 TypeScript 中有一个字典数组，如下所示：

const dict = [
     { name: "Lorem", prop: "sit" },
     { name: "Ipsum", prop: "amet" },
     { name: "Dolor", prop: "consectetur" }
];

当我尝试通过以下方式动态访问此字典中的对象时：

const handleChange = React.useCallback((eventKey: eventKey) => {
    let property = dict.find(e => e.name === eventKey)?.prop;
    changeProp(property);  //Getting error here
}

请注意，这是动态变化，可以在此处找到演示：https://jsfiddle.net/mdhjfq13/3/

我得到的错误是：

TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

我试过这样使用它：

let property = dict.find(e => e.name === eventKey);
let name1:string = property.prop!; //Error here
changeProp(name1);

现在得到的错误是：TS2532: Object is possibly 'undefined'.

我不知道如何处理这个问题，因为我是 TypeScript 和 React 的新手。

Answer 1

const handleChange = React.useCallback((eventKey: eventKey) => {
    let property = dict.find(e => e.name === eventKey)?.prop;
    changeProp(property);  //Getting error here
}

在这里，在您的函数中，当您在 dict 上查找时，您假设 find 函数可以返回一个空值 dict.find(e => e.name === eventKey)?.prop， 这样 property 可以是 undefined | string。

尝试以这种方式更新您的函数 dict.find(e => e.name === eventKey)?.prop || ""，这意味着如果 find 没有返回任何值，而不是 undefined，变量 property 将是 ""。

Answer 2

Array find 方法从满足条件的数组中返回第一个元素。但是当没有找到匹配的元素时它返回 >>> t.bool().int() tensor([0, 1, 0, 1], dtype=torch.int32) 。

这使得 undefined 的返回类型为 find，即 Your_Element_Type | undefined 对于您的问题（在阅读 string | undefined 的结果后 prop< /em>).

问题

find

要解决此问题，您需要在函数 let property = dict.find((e) => e.name === eventKey)?.prop // property will either be a string or undefined changeProp(property); 中接受 string | undefined，或者提供后备字符串值（空字符串）。

解决方案

提供一个空字符串作为后备值：

changeProp

此外，可以在编辑器中看到类型：