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

Question

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

基本上，我正在使用 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.keys(AllArrays)来获取对象所有键的数组(如["1", "2", ...](。我以前在应用程序中使用了相同的方法，当它工作得很好时(那时，我有一个对象对象(。

我尝试了以下方法：

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

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

我

---

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

Answer 1

请记住，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>
)
}