将基于类的 js useState 数组转换为 typescript Hook 问题

Posted

技术标签:

【中文标题】将基于类的 js useState 数组转换为 typescript Hook 问题【英文标题】:Converting class-based JS useState array to TypeScript Hook problem 【发布时间】:2022-01-09 00:20:51 【问题描述】:

更新

我通过将我的 useState 声明更改为:

const [ data, setData ] = useState([]);

const [ data, setData ] = useState<any>([]); //type: read/write/notify/error, bin: 8 int binary, ascii: ASCII Value

但是,我意识到这只是违背了使用 Typescript 的目的。所以,我基于@tomleb3 答案的下一步是为data 创建一个接口,如下所示:

const [ data, setData ] = useState<DataType>([]); //type: read/write/notify/error, bin: 8 int binary, ascii: ASCII Value
  
  interface DataType
    chx: any,
    bin: string,
    type: string,
    ascii: string
  

但这会报错:

“never[]”类型的参数不能分配给类型参数 '数据类型 | (() => 数据类型)'。类型 'never[]' 不可分配给 输入“()=>数据类型”。 类型 'never[]' 与签名 '(): DataType' 不匹配。

我不知道如何从这里开始,因为删除 [] useState 声明然后将错误推送到我使用 setData() 调用的任何地方,并出现以下错误:

'any[]' 类型的参数不能分配给类型参数 'SetStateAction'。类型 'any[]' 不是 可分配给类型 '(prevState: DataType | undefined) => DataType | 未定义'。


原帖

我已经使用 react / typescript 工作了几天,并且正在通过做一个小项目来自学。作为其中的一部分,我目前正在将一些基于类的代码转换为钩子。

我有以下基于 (js) 类的代码,我不知道如何将其转换为在带有 typescript 的钩子中使用:

this.setState(
  data: [
    ...this.state.data,
    
      chx: chx,
      type: type,
      bin: bin,
      ascii: ascii,
    ,
  ],
);

在我的基于钩子的等效项中,我知道我会使用setData(); 来表示一个简单的状态。但是,如何转换上面的示例?我的尝试(如下)显然是错误的,因为我收到了错误:Type ' chx: unknown; type: string; bin: string; ascii: string; ' is not assignable to type 'never'. 但我坚持下一步应该做些什么来尝试解决这个问题:

setData([
  ...data,
  
    chx: chx,
    type: type,
    bin: bin,
    ascii: ascii,
  
])

任何指针/解决方案将不胜感激。

谢谢。

【问题讨论】:

如果你的状态类型最终是DataType对象的数组,那么正确的语法是const [ data, setData ] = useState&lt;DataType[]&gt;([]); @tomleb3 当然可以。谢谢! 【参考方案1】:

您收到的错误是 Typescript 错误,而不是 React 错误。 您的代码非常好,但是在使用 Typescript 时,我们需要像其他所有内容一样键入我们的状态。

例如如下所示:

interface State 
   key1: string,
   key2: number,
   key3: boolean,


function myComponent() 
   const [state, setState] = useState<State>(
      key1: 'test',
      key2: 42,
      key3: false,
   )

这允许 Typescript 了解您的状态结构,从而使其能够应用相关的类型保护和限制。

【讨论】:

谢谢。我认为是这样,但在这个阶段,我试图保持开放的心态,而不是做出可能会在以后给我带来问题的假设。 请查看我更新的问题。我尝试添加一个界面,但这导致了其他错误。谢谢。 Phill / tomleb3 - 你能在你们之间讨论问题更新是否代表一个新问题吗?对问题的更新部分往往会创建我们所谓的“变色龙问题”,这些问题会永远转变为新的状态,并且它要求答案作者回答一系列问题,而不仅仅是一个问题。 如果有疑问,请谨慎行事,并且 - 请 Phill - 问一个新问题。请记住,这个平台的目的是帮助未来的读者——帮助问题作者是过程的一部分,但有点偶然。需要考虑的一件事是:这两个问题是否高度相关,或者它们可以独立存在?如果后者是正确的,那么也许一个新的问题就是要走的路。 @halfer 我同意,但在我看来,这只是帮助将问题推向我从一开始就需要的答案。我以为我在这里提供了额外的信息,个人认为这并没有改变问题。但是,我下次一定会记住的。

以上是关于将基于类的 js useState 数组转换为 typescript Hook 问题的主要内容,如果未能解决你的问题,请参考以下文章

如何将此基于 ReactJS 类的组件转换为基于函数的组件?

反应JS |将函数组件更改为基于类的引用错误

怎样将json数据转换成匿名数组或者泛型对象(c#)

笔记js Array.prototype.slice.call(arguments) 将函数的参数转换为数组方法的见解

在 React.js 中更新 useState 数组的特定变量(按其位置)?

Unity C#:如何将类的数组转换为 JSON [重复]