类型“{}”缺少类型“”中的以下属性答案

【问题标题】：Type '{}' is missing the following properties from type ''"类型“{}”缺少类型“”中的以下属性
【发布时间】：2021-07-29 10:26:29
【问题描述】：

我有一个真正的挠头！我一直在尝试解决这个问题，但无济于事！

错误：类型 '{ fieldHandler: (e: any) => void; getBrands：函数；品牌：品牌[]； }' 缺少“BrandProps”类型的以下属性：error、errorHandler、nav、navHandler TS2739

我有一个父组件将 props 传递给子组件，还有一个高阶组件将额外的 props 传递给同一个子组件。

父组件返回

return (
    <Fragment>
      <Brands
        fieldHandler={fieldHandler}
        getBrands={get_brands}
        brands={brands}
      />
    </Fragment>
  );

高阶组件

export type WrapperProps = {
  error?: boolean;
  errorHandler?: Function;
  nav?: object;
  navHandler?: Function;
};

const stepsHoc = <P extends WrapperProps>(
  OriginalComponent: React.ComponentType<P>
): React.FunctionComponent<P> => {
  const NewComponent: React.FC<P & WrapperProps> = props => {
    const [error, errorHandler] = useState<boolean>(false);
    const [nav, navHandler] = useState<object>({
      next: null,
      previous: null
    });

    return (
      <OriginalComponent
        error={error}
        errorState={errorHandler}
        nav={nav}
        navHandler={navHandler}
        {...(props as P)}
      />
    );
  };
  return NewComponent;
};

export default stepsHoc;

子组件

interface IBrand {
  id: number;
  name: string;
}

interface BrandProps {
  error: boolean;
  errorHandler: Function;
  nav: object;
  navHandler: Function;
  fieldHandler: Function;
  getBrands: Function;
  brands: IBrand[];
}

const Brands: React.FC<BrandProps> = ({
  fieldHandler,
  getBrands,
  brands,
  error,
  errorHandler,
  nav,
  navHandler
}) => {

// * Note logging of error in child = false 
  console.log('Log = ', error); 

  return (
    <Fragment>
    </Fragment>
  );
};

export default StepsHoc(Brands);

【问题讨论】：

这里有什么问题？
没错！哈哈，我得到的错误似乎表明 error、errorHandler、nav、navHandler 不是 BrandProps 的属性。
所以你的高阶组件将 props 传递给父组件，而父组件将 props 传递给子组件，对吗？
Parent 将 props 传递给 HOC，HOC 将额外的 props 传递给 child。 HOC 只是子组件的“包装器”。
看看我的回答，这可能会有所帮助。另外，我注意到一个拼写错误，请参阅您的 HOC OriginalComponent 道具：errorState={errorHandler}，猜测应该是 errorHandler

标签： reactjs typescript higher-order-components

【解决方案1】：

您的问题是您传递给子组件的道具。

根据您孩子的定义，这些是组件必须接收的道具：

interface BrandProps {
  error: boolean;
  errorHandler: Function;
  nav: object;
  navHandler: Function;
  fieldHandler: Function;
  getBrands: Function;
  brands: IBrand[];
}

在您的父组件中，您只传递了其中的 3 个：

<Brands
        fieldHandler={fieldHandler}
        getBrands={get_brands}
        brands={brands}
      />

在 HOC 中，额外的属性可以是可选的（因此它们可能不存在，这是错误的原因）。

因此，要修复，您可以将BrandProps 接口上的额外属性设置为可选，通过使用“？”定义它们，例如error?: boolean;，或者如果您认为它们必须被传递，您可以添加它们

【讨论】：