提问人:Hasith Yoman 提问时间:7/9/2023 更新时间:7/12/2023 访问量:63
预输入错误:类型“Option”上不存在属性“name”
Typeahead 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。如何修复此错误
答:
0赞
victor sanchez
7/10/2023
#1
我正在做同样的课程,我遇到了类似的问题,但有地图
这适用于该问题,但在这种情况下,我很难弄清楚如何以简单的方式实现它
编辑:如何在 Reactjs 18 中使用 TypeAhead
没关系,即使它不是最干净的解决方案,这每次都有效
评论
0赞
victor sanchez
7/10/2023
stackoverflow.com/questions/73578062/......好吧,没关系,这个效果很好
评论