Question

我正在尝试将具有状态的组件从基于类转换为功能，我的状态类如下：

class Person {
    name:string = ""
    email:string = ""
}

我的班级组件看起来像这样：

class Component1 extends React.Component<{}, Person> {
    state: Person = new Person();
    foo() {
        this.setState ({name:"me"});
    }
}

您可以看到setState调用仅更新状态的一个属性。将其转换为功能组件看起来像这样：

function Component() {
    const [state, setState] = useState(new Person())
    function foo() {
        setState({name:"me"})
    }
}

但是在setState调用中出现编译错误

Argument of type '{ name: string; }' is not assignable to parameter of type 'SetStateAction<Person>'.
  Property 'email' is missing in type '{ name: string; }' but required in type 'Person'.

如果我使用setState({...state, name:"me"})，显然问题就消失了，但是如果这只是TypeScript绑定中的一个小故障，我不想这样做。

Answer 1

React Docs对此有一个注释：

注意

与在类组件中找到的setState方法不同，useState可以不会自动合并更新对象。您可以复制此通过将功能更新程序形式与对象传播相结合来实现行为语法：

setState（prevState => {
// Object.assign也可以工作
返回{... prevState，... updatedValues}; }）;

另一个选项是useReducer，这更适合管理包含多个状态对象子值。

因此，您可以选择以下任一方式：

使用上述传播语法。
将您的人物状态分为两个单独的useState。
使用useReducer。不过，这仍然需要将先前状态散布到返回值中。

如何在React / TypeScript中使用钩子进行部分状态更新

1 个答案: