您如何在响应时处理Typescript类型的局部状态变量？

如何解决您如何在响应时处理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)
            }
         />
    );
}

在上面的代码示例中，我的currentFoo变量必须为HelloWorld类型，但是我的问题是，直到从redux状态加载该值或从api获取该值时，我才真正拥有该值。 。在这种情况下，我将在MyComponent和InputComponent中收到Typescript错误，指出类型HelloWorld与undefined类型不兼容。

如何通过将currentFood状态变量转换成一个必须在任何地方支持类型undefined的组件链来初始化？这可能吗

解决方法

在MyComponent中，可以将currentFoo定义为HelloWorldType或undefined，在InputComponentPropType中，可以将currentFoo属性标记为可选，在设置输入字段的name或value时，请保持选中状态。如果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)
            }
         />
    );
}

OR

一种更简单的方法是只使用一个虚拟值初始化currentFoo内部的MyComponent

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