预输入错误:类型“Option”上不存在属性“name”

Typeahead error: Property 'name' does not exist on type 'Option'

提问人:Hasith Yoman 提问时间:7/9/2023 更新时间:7/12/2023 访问量:63

问:

I'm encountering an issue with the react-bootstrap-typeahead library in my React application. When using the Typeahead component, I'm getting the following error: "Property 'name' does not exist on type 'Option'".

这是我的代码:

import { Typeahead } from "react-bootstrap-typeahead";
import { actorMovieDTO } from "../actors/actors.model";
interface typeAheadActorsProps{
     displayName:string;
     actors: actorMovieDTO[];
}  

function TypeAheadActors(props: typeAheadActorsProps){

   const actors: actorMovieDTO[]=[{
        id:1, name: "Felipe", character: '',picture:''
},
{
    id:2, name: "Fernando", character: '', picture:''
},
{
    id:3, name: "Jesica", character: '', picture:''
}]
return(
    <>
        <label>{props.displayName}</label>
        <Typeahead
            id="typeahead"
            onChange={actor => { 
                console.log(actor);
            } } options={actors}    
                labelKey={actor=> actor.name}  
                filterBy={['name']}
                placeholder="write the name of the actor...."          >

        </Typeahead> 
    </>
)}export default TypeAheadActors

这是我的 actors.model 类

export interface actorMovieDTO{
id:number;
name: string;
character: string;
picture: string;}

我正在尝试使用 Typeahead 组件来实现演员搜索功能。但是,在输入输入时,我遇到了上述错误。

该错误似乎与 labelKey 道具有关,我在其中指定了 labelKey={(actor) => actor.name}。name 属性确实存在于我的 actorMovieDTO 接口上,所以我不确定为什么会出现此错误。

我已经检查了 actorMovieDTO 类型是否正确导入和定义。我正在使用最新版本的 react-bootstrap-typeahead。如何修复此错误

reactjs 类型提前 react-bootstrap-typeahead

评论


答:

0赞 victor sanchez 7/10/2023 #1

我正在做同样的课程,我遇到了类似的问题,但有地图

错误 TS2339:类型“Y”上不存在属性“x”

这适用于该问题,但在这种情况下,我很难弄清楚如何以简单的方式实现它

编辑:如何在 Reactjs 18 中使用 TypeAhead

没关系,即使它不是最干净的解决方案,这每次都有效

评论

0赞 victor sanchez 7/10/2023
stackoverflow.com/questions/73578062/......好吧,没关系,这个效果很好