时间戳

首页 > 解决方案 > 如何使用 React/TypeScript 中的钩子进行部分状态更新

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

问题描述

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

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 绑定中的一个小故障，我不想这样做。

标签： reactjstypescript

解决方案

React 文档对此有注释：

笔记

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

setState(prevState => {
// Object.assign 也可以使用
return {...prevState, ...updatedValues}; });

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

所以你的选择是：

  1. 使用上面的扩展语法。
  2. 将您的 person 状态拆分为两个单独useState的 s。
  3. 使用 useReducer。不过，这仍然需要将可渗透的状态传播到返回值中。

推荐阅读