Question

我正在尝试在JavaScript中连接地图循环，我所做的是：

interface RoutesType {
  path: string;
  name: string;
  icon: string;
  layout: string;
}

地图循环的代码为：

// creates the links that appear in the left menu / Sidebar
  const createLinks = (routes: object[]) => {
    return routes.map((prop: RoutesType, key: number) => {
      return (
        <NavItem key={key}>
          <NavLink to={prop.layout + prop.path} tag={NavLinkRRD} onClick={closeCollapse} activeClassName="active">
            <i className={prop.icon} />
            {prop.name}
          </NavLink>
        </NavItem>
      );
    });
  };

我无法理解的错误如下

TypeScript error: Argument of type '(prop: RoutesType, key: number) => Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'.
  Types of parameters 'prop' and 'value' are incompatible.
    Type '{}' is missing the following properties from type 'RoutesType': path, name, icon, layout

您能帮我理解这个问题吗？谢谢， F。

Answer 1

此错误的原因是类型routes的{{1}}参数不能转换为object[]类型。

TypeScript尝试进行此类型转换的原因是，由于地图回调上的RoutesType[]参数的类型，推断出routes的类型并预期为RoutesType[]。

一种解决方法是修改您的prop函数签名，如下所示：

createLinks

此更改将要求在您的整个项目中，对/* Update routes to RoutesType[] */ const createLinks = (routes: RoutesType[]) => { return routes.map((prop: RoutesType, key: number) => { return ( <NavItem key={key}> <NavLink to={prop.layout + prop.path} tag={NavLinkRRD} onClick={closeCollapse} activeClassName="active"> <i className={prop.icon} /> {prop.name} </NavLink> </NavItem> ); }); };的所有调用都必须严格定义为createLink的{{1}}值

React Typescript映射循环接口错误

1 个答案: