无法将 Object.values 函数与 TypeScript 中的对象一起使用

Question

我正在尝试使用 Object.values(obj) 创建对象内所有键的值数组 函数，但它会引发以下错误：

No overload matches this call.
  Overload 1 of 2, '(o: { [s: string]: string; } | ArrayLike<string>): string[]', gave the following error.
    Argument of type 'SocialMedia | undefined' is not assignable to parameter of type '{ [s: string]: string; } | ArrayLike<string>'.
      Type 'undefined' is not assignable to type '{ [s: string]: string; } | ArrayLike<string>'.
  Overload 2 of 2, '(o: {}): any[]', gave the following error.
    Argument of type 'SocialMedia | undefined' is not assignable to parameter of type '{}'.
      Type 'undefined' is not assignable to type '{}'.ts(2769)

这是带有对象类型的代码：

{
  Object.values(data?.socialMedia).map((social) => (
    <div key={social} className="cursor-pointer">
      {renderSocial(social)}
    </div>
  ));
}

export type SocialMedia = {
  fb: string;
  insta: string;
  twitter: string;
};

我尝试明确使用 data.?socialMedia 作为对象，但它没有用。我尝试了一个简单的 for 循环解决方法，但这也不起作用。

Answer 1

如果data 是假的，data?.socialMedia 将给出undefined。而Object.values() 期望一个对象作为参数；这就是你得到的错误。您可以这样做来修复它：

{data ? (
  Object.values(data.socialMedia).map((social) => (
    <div key={social} className="cursor-pointer">
      {renderSocial(social)}
    </div>
  ))
) : (
  <></>
)}