'number' 类型的参数不能分配给 'SetStateAction<{ count1: number; 类型的参数； count2：数字； }>'

Question

我尝试使用 typescript 实现计数器，但出现错误提示：

“'number' 类型的参数不可分配给'SetStateAction' 类型的参数”。

当我单击按钮时，p 标签会消失。

这是代码，我用粗体突出显示了错误部分：

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(count1+1)}>Add1</button>
      <button onClick={() => setCount(count2+5)}>Add5</button>
    </div>
  );
};

Answer 1

因为你的状态是一个对象。所以你需要更新你的setCount 来更新对象

setCount((preState) => ({
  ...preState,
  count1: count1 + 1,
}));

Answer 2

发生错误是因为从这行setCount(count1+1)和setCount(count2+5)

您的原始状态期望有一个 count1 和 count2 的对象，但是当您设置状态时，您只放弃一个。

因此，解决方案是将两个变量从原始状态放回原处，如下所示：

onClick={() => setCount({ count1: count1 + 1, count2 })}

所以整个组件变成：

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

---

另外，请记住将button type 以HTML Standard 形式添加到您的按钮元素中

Viet 的回答也是满足打字稿期望并修复类型错误的另一个更短的解决方案。