React如何根据API返回的对象结构给useState设置初始值

常见有两种方案可选，你可以根据自己的业务场景选择： #

• 直接传符合ObjectData接口结构的默认值
  你可以给每个字段填入对应类型的初始默认值，这种方案的好处是渲染时直接访问属性不会触发空值报错，写法如下：

interface ObjectData {
    title: string,
    id: number,
    description: string
}

const [fetchData, setFetchData] = React.useState<ObjectData>({
  title: '',
  id: 0,
  description: ''
});

• 初始值设为null，标记未请求完成的状态
  如果你需要明确区分「接口还未返回数据」和「接口已经返回数据」的状态，可以给state类型加上null的联合类型，初始值直接传null，渲染时加空值判断即可：

interface ObjectData {
    title: string,
    id: number,
    description: string
}

// 类型新增null可选
const [fetchData, setFetchData] = React.useState<ObjectData | null>(null);

// 渲染时用可选链访问属性避免报错
// 示例：<div>{fetchData?.title}</div>

内容的提问来源于stack exchange，提问作者Sole