TypeScript实现计数器报错：number类型不可分配给SetStateAction<{count1:number;count2:number;}>类型

错误原因 #

• 你声明的useState存储的是包含count1、count2两个属性的对象类型，但调用setCount时传入的是数字类型，类型不匹配直接触发TypeScript报错。
• 执行setCount(数字)后，原本的对象状态会被覆盖为数字，后续解构{count1, count2}时会从数字上读取不存在的属性，拿到undefined，React渲染undefined不会展示任何内容，就出现了p标签消失的现象。

修复方案 #

修改onClick里的setCount逻辑，更新状态时传入完整的新对象，同时保留未修改的另一个计数器属性。使用函数式更新可以保证拿到的是最新的状态值，避免异步更新导致的计算错误：

• 更新count1逻辑：setCount(prev => ({ ...prev, count1: prev.count1 + 1 }))
• 更新count2逻辑：setCount(prev => ({ ...prev, count2: prev.count2 + 5 }))

修复后完整代码如下：

import React, { useState } from "react";

export const UseStateP: React.FC = () => {
  const [{count1,count2}, setCount] = useState({count1:0, count2:5});
  console.log(count1,count2) // 0, 5
  return (
    <div>
      <p>{count1}</p>
      <p>{count2}</p>
      <button onClick={() => setCount(prev => ({ ...prev, count1: prev.count1 + 1 }))}>Add1</button>
      <button onClick={() => setCount(prev => ({ ...prev, count2: prev.count2 + 5 }))}>Add5</button>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Luke Lyu