以下是我的代码:
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
这是我的演员.模特班
export interface actorMovieDTO{
id:number;
name: string;
character: string;
picture: string;}
我正在try 使用TypeAhead组件来实现参与者搜索功能.然而,在输入时,我得到了上面提到的错误.
该错误似乎与LabelKeyprops 有关,我在其中指定LabelKey={(参与者)=>;actor.name}.我的actorMovieDTO接口上确实存在name属性,所以我不确定为什么会收到这个错误.
我已经判断了actorMovieDTO类型是否已正确导入和定义.我使用的是最新版本的Reaction-Bootstrap-Typehead.如何修复此错误