React基于对象初始化状态

Question

如果我的数据在这个结构中来自api:

{
title: "Title", 
id: 1,
description: "example desc"
}

传递给状态对象的初始值是什么?即

interface ObjectData {
title: string,
id: number,
description: string
}
const [fetchData, setFetchData] = React.useState<ObjectData>(?// here);

Answer 1

如果您有一个默认值要设置(可能是一个mock)，那么您可以设置类型为ObjectData的对象。

例如

const defaultData: ObjectData = {
title: 'x',
id: -1,
description: 'xyz',
};
...
const [fetchData, setFetchData] = React.useState<ObjectData>(defaultData);

否则，如果你没有默认的数据，你将在稍后的时间获得数据，例如通过异步API，然后将其保留为空。fetchData的类型将自动变为fetchData: ObjectData|undefined

const [fetchData, setFetchData] = React.useState<ObjectData>();

---

或者您可以显式地将空对象类型转换为ObjectData

const [fetchData, setFetchData] = React.useState<ObjectData>({} as ObjectData);

如果我将在稍后的时间获得数据，我将保留默认值为空。

Answer 2

我认为你可以这样做:

{
title: "Title", 
id: 1,
description: "example desc"
}
const [fetchData, setFetchData] = React.useState({title, id, description});

从这里抓取:在React.useState中保存对象