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:

以下是我的代码:

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={(参与者)=&gt;actor.name}.我的actorMovieDTO接口上确实存在name属性,所以我不确定为什么会收到这个错误.

我已经判断了actorMovieDTO类型是否已正确导入和定义.我使用的是最新版本的Reaction-Bootstrap-Typehead.如何修复此错误

推荐答案

我正在做相同的课程,我遇到了类似的问题,但使用MAP

error TS2339: Property 'x' does not exist on type 'Y'

这个方法解决了这个问题,但在这个例子中,我很难弄清楚如何以一种简单的方式实现它

Reactjs相关问答推荐

为什么Next.js 14无法解析页面路由路径?

For循环中的元素在Reaction中丢失挂钩

将对象添加到集合中的数组时的no_id字段

REACTJS:在Reaction中根据路由路径更改加载器API URL

有没有办法将在服务器端全局获取的一些数据传递到Next&>13应用程序目录中的客户端组件?

导致useState中断的中断模式

页面永远加载API/从数据库获取数据

根据处于react 状态的数组的名称键,将新对象添加到嵌套的对象数组中

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

React useContext 的未定义返回值

提前输入错误:选项类型上不存在属性名称

useState数组不更新

React Native 背景动画反转

在 React-Select 中显示多值的倒序

如何在同一路由路径上重新渲染组件(链接,V6)reactjs

模块解析失败:意外令牌 (257:106) 您可能需要适当的加载程序来处理此文件类型

.filter() 函数在删除函数中创建循环 - React

NextJs - 如何从站点 map 生成器中删除重复的 URL?

在 redux 状态更改时更新react 按钮禁用状态

React LinkProps 的含义