reactjs - 'string | undefined' 类型的参数不能分配给 '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将是 "" .