Reactjs 如何处理react中加载的Typescript类型的局部状态变量？

我最近开始从事一个使用Typescript的React项目，我遇到了一个特别的问题，我不知道它在Typescript中是如何处理的。这在react项目中非常常见，我相信有一种方法可以解决这一问题，但还没有找到有用的文档

import * as React from "react"; 
import { useDispatch, useSelector } from "react-redux-consumer";
import { loadFoo } from "reduxActions/action";

type FooType = {
  hello: HelloWorldType; 
  world: HelloWorldType;
}

type HelloWorldType = {
  name: string;
  value: string;
}

const MyComponent = () => {
  // On load foo value hasn't been loaded yet. Initialize it to empty
  const [currentFoo, setCurrentFoo] = React.useState<HelloWorldType>(); 
  const foo = useSelector(state => state.foo);
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(loadFoo());
  }, [loadFoo]);

  return (
    <div>
      <InputComponent currentFoo={currentFoo} setCurrentFoo={setCurrentFoo}/>
    </div>
  ); 
}

export type setCurrentFoo = React.Dispatch<
  React.SetStateAction<HelloWorldType>
>;

type InputComponentPropType = {
 currentFoo: HelloWorldType;
 setCurrentFoo: setCurrentFoo;
}

const InputComponent = (props: InputComponentPropType) => {
   const {currentFoo, setCurrentFoo} = props;
    return (
         <input 
            type="checkbox" 
            id="hello" 
            name={currentFoo.name} 
            value={currentFoo.value} 
            onChange={e => {
              setCurrentFoo(currentFoo)
            }
         />
    );
}

import*as React from“React”；
从“react redux consumer”导入{useDispatch，useSelector}；
从“reduxActions/action”导入{loadFoo}；
类型FooType={
你好：HelloWorldType；
世界：HelloWorldType；
}
类型HelloWorldType={
名称：字符串；
值：字符串；
}
常量MyComponent=（）=>{
//加载时尚未加载foo值。请将其初始化为空
const[currentFoo，setCurrentFoo]=React.useState（）；
constfoo=useSelector（state=>state.foo）；
const dispatch=usedpatch（）；
React.useffect（（）=>{
调度（loadFoo（））；
}，[loadFoo]）；
返回(
); 
}
导出类型setCurrentFoo=React.Dispatch<
动作
>;
类型InputComponentPropType={
currentFoo:HelloWorldType；
setCurrentFoo:setCurrentFoo；
}
常量InputComponent=（props:InputComponentPropType）=>{
const{currentFoo，setCurrentFoo}=props；
返回(
{
setCurrentFoo（currentFoo）
}
/>
);
}

在上面的代码示例中，我的

currentFoo

变量需要是

HelloWorld

类型，但我的问题是，在从redux状态加载或从api获取之前，我实际上没有该值。在这种情况下，我将在

MyComponent

和

InputComponent

中得到类型脚本错误，该类型

HelloWorld

与

未定义的类型不兼容

如何初始化
currentFood
状态变量，并将其转换为一个组件链，在该链中，您必须到处支持类型
undefined
？这是否可能
在
MyComponent
中，您可以将
currentFoo
定义为
HelloWorldType
或
未定义的
，在
InputComponentPropType
中，您可以将
currentFoo
属性标记为可选属性，并在设置输入字段的
名称
或
值
时进行检查。如果
currentFoo
不存在，则将其指定给某个默认值。我已将其指定给下面的空字符串，但您可以将其指定为任何值

import * as React from "react"; 
import { useDispatch, useSelector } from "react-redux-consumer";
import { loadFoo } from "reduxActions/action";

type FooType = {
  hello: HelloWorldType; 
  world: HelloWorldType;
}

type HelloWorldType = {
  name: string;
  value: string;
}

const MyComponent = () => {
  // On load foo value hasn't been loaded yet. Initialize it to empty
  const [currentFoo, setCurrentFoo] = React.useState<HelloWorldType|undefined>(); 
  const foo = useSelector(state => state.foo);
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(loadFoo());
  }, [loadFoo]);

  return (
    <div>
      <InputComponent currentFoo={currentFoo} setCurrentFoo={setCurrentFoo}/>
    </div>
  ); 
}

export type setCurrentFoo = React.Dispatch<
  React.SetStateAction<HelloWorldType>
>;

type InputComponentPropType = {
 currentFoo?: HelloWorldType; // '?' makes this property/field optional
 setCurrentFoo: setCurrentFoo;
}

const InputComponent = (props: InputComponentPropType) => {
   const {currentFoo, setCurrentFoo} = props;
    return (
         <input 
            type="checkbox" 
            id="hello" 
            name={currentFoo?.name || ""} 
            value={currentFoo?.value || ""} 
            onChange={e => {
              setCurrentFoo(currentFoo)
            }
         />
    );
}

  const [currentFoo, setCurrentFoo] = React.useState<HelloWorldType>({ name: "", value: "" });