时间戳

首页 > 解决方案 > Typescript Object.keys() 总是返回一个空数组

reactjs - Typescript Object.keys() 总是返回一个空数组

问题描述

首先，我想提一下，虽然这个问题之前已经被问过好几次了，但似乎没有一个解决方案对我有用。

基本上，我使用的是 Ionic React，在我的代码中，我有一个对象，我声明为：

const [allArrays, setAllArrays] = useState<AllArraysObject>({});

AllArraysObject是一个自定义类型，在另一个文件中声明为：

export interface myType{
  a: number,
  b: string,
  ...
}

export type AllArraysObject= {
  [key: string]: myType[]
}

我真正期望创建的是一个看起来像这样的对象：

{
    "1": [
        {a: 10, b: "Hello", ...},
        {a: 11, b: "Hi", ...},
        ...
    ],
    ...
}

这本质上是一个Object 的 Arrays of Objects。问题是我不能Object.keys(AllArrays)用来获取对象所有键的数组（如["1", "2", ...]）。我以前在应用程序中使用过相同的方法，当时它工作得很好（那时，我有一个 Object of objects）。

我尝试了以下方法：

Object.keys(allArrays)
Object.keys(allArrays as Object)
Object.keys(JSON.parse(JSON.stringify(allArrays)))
Object.getOwnPropertyNames(allArrays)

每个都给我一个空的Array(0)。正如预期的那样，如果 I console.log(allArrays)，我可以看到对象的所有属性，并且在控制台中运行上述功能时，我确实得到了所需的输出。

我想知道我在这里犯了什么错误（这可能是因为我对对象如何工作的理解存在差距）并且我还寻求对上述行为的解释。任何帮助将不胜感激。

标签： reactjstypescript

解决方案

记住 useState 有一个初始值，在这种情况下它是一个空对象{}。我假设您在设置值之前记录它们。

const Component = () => {
  const [allArrays, setAllArrays] = useState<AllArraysObject>({});

  useEffect(() => {
    const sampleObject = { "1": [ { a: 10, b: "Hello" }, { a: 11, b: "Hi" } ] }
    setAllArrays(sampleObject);
  }, [])

  console.log(Object.keys(allArrays))
  // This be Array(0) on mount until setAllArrays is set
  // when useEffect issues a side-effect

  // so make a guard if object is empty
  if (Object.keys(allArrays).length === 0 && obj.constructor === Object) {
    // null else set to anything you desire
    return null;
  }

  return (
    <div>{/* use allArrays */}</div>
  )
}

推荐阅读