时间戳

首页 > 解决方案 > 在设置状态时如何正确提供类型？

reactjs - 在设置状态时如何正确提供类型？

问题描述

我想使用 useState 将对象存储在反应状态并将 setState 传递给子组件，但随后出现打字稿错误。怎么了？

打字稿错误

Argument of type '(oldPerson: any) => any' is not assignable to parameter of type 'Person'.

代码

interface Person {
name: string
age: number
job: string

}

const [person, setPerson] = useState<Person | null>()

const updateOldPerson={
  age: 70
}
    
setPerson((oldPerson) => ({
      ...oldPerson,
      ...updateOldPerson
 }))

标签： reactjstypescript

解决方案

如果你想使用null类型，那么初始状态不应该是未定义的

const [person, setPerson] = useState<Person | null>(null)

为了同时使用功能状态更新和正常状态更新，类型setPerson可以是

setPerson: Dispatch<SetStateAction<Person | null>>;

如果您将此作为道具传递给子组件，则道具界面应如下所示

interface ChildProps {
  setPerson: Dispatch<SetStateAction<Person | null>>;
}


const Child: FunctionComponent<ChildProps> = ({ setPerson }) => {
  return (
    <button
      onClick={() => {
        const updatedPerson = {
          name: "vuvu",
          age: 69,
          job: "foo"
        };
        setPerson((prevPerson) => ({ ...prevPerson, ...updatedPerson }));
      }}
    >
      Update Person
    </button>
  );
};

这是一个有效的代码框示例

由于年龄、姓名、工作属性不是可选的，因此请确保使用包含所有三个字段的人员对象更新状态。或者，您可以将某些字段设为可选，例如

interface Person {
  name: string;
  age: number;
  job?: string; // this is optional
}

推荐阅读