React TypeScript:将字符串数组保存为状态并在无序列表中显示数组

法案

我正在尝试将数组保存为状态,然后我想以某种方式遍历dom中保存为状态的数组,以使用数组中的每个项创建一个无序列表

  • 下面的示例中的数组值只是为了使其简单起见,它们实际上来自数据库,我不提前知道这些值,但是我知道它们是字符串。

    import React, { useState } from 'react';
    const Worbli: React.FC = () => {
    
      const [state, setState] = useState({
         myArray = '';
      });
      const theArrayToSave = ['apple', 'orange', 'peach'] 
      setState({ ...state, myArray: theArrayToSave });
    
      return (
        <ul>
          { state.myArray.map( (fruit:string,index:number) => (<li key={index} >{fruit}</li>)) }
        </ul>
      )
    }
    

    我得到的错误是

    Argument of type '{ myArray: string[]; accountNameError: string; loading: boolean; }' is not assignable to parameter of type 'SetStateAction<{ accountNameError: string; loading: boolean; myArray: string; }>'.
      Type '{ myArray: string[]; }' is not assignable to type '{ myArray: string; }'.
        Types of property 'myArray' are incompatible.
          Type 'string[]' is not assignable to type 'string'.ts(2345)
    
  • 您应该这样声明您的状态:

    const [state, setState] = useState({
      myArray: [];
    });
    

    但是,正如您前面提到的,这使它成为never[]类型而不是string[]类型,并且仍然会引发错误。为了解决这个问题,您应该像这样在状态声明中添加类型:

    interface IState {
      accountNameError: string;
      loading: boolean;
      myArray: string[];
    }
    
    const [state, setState] = useState<IState>({
      accountNameError: "",
      loading: false,
      myArray: []
    });
    

    这样,您可以明确告诉TypeScript您状态值应该是什么样。

    本文收集自互联网,转载请注明来源。

    如有侵权,请联系[email protected] 删除。

    编辑于
    0

    我来说两句

    0条评论
    登录后参与评论

    相关文章

    来自分类常见问题

    React:在数组的引导轮播项目中显示无序列表

    来自分类Dev

    React:在数组的引导轮播项目中显示无序列表

    来自分类Dev

    TypeScript React:使用字符串数组作为索引并从状态获取值

    来自分类Dev

    如何将数组适配器中的选定项目保存为字符串

    来自分类Dev

    将最新的字符串值保存在React状态Rray中

    来自分类Dev

    如何将字符串保存到数组并在标签中显示字符串?

    来自分类Dev

    将图像在mongodb中保存为Blob,React

    来自分类Dev

    将json数组转换为仅具有react中的json属性值的字符串数组

    来自分类Dev

    将json数组转换为仅具有react中json属性值的字符串数组

    来自分类Dev

    检查字符串数组是否在react中包含子字符串值

    来自分类Dev

    我们应该如何将字符串数据转换为数组并显示为React表

    来自分类Dev

    如何将已更改为字符串的索引数组的项保存为可变Javascript

    来自分类Dev

    将HTML插入用户字符串并在React中呈现(并避免XSS威胁)

    来自分类Dev

    在将输入的defaultValue设置为对象数组中的字符串时,React Array.find()无法正常工作

    来自分类Dev

    将列表列表保存为多行字符串的正确方法?

    来自分类Dev

    迅速将NSUserDefaults保存为TableView的字符串数组

    来自分类Dev

    如何将JavaScript数组保存为Redis列表

    来自分类Dev

    如何将DataFrame保存为列表而不是字符串

    来自分类Dev

    Qt 将字符串保存为 JSON

    来自分类Dev

    使用python替换列表中的字符串并将其保存为其他变量

    来自分类Dev

    根据react中字符串数组中指定的顺序对组件进行排序

    来自分类Dev

    我如何在React Native中的数组内部合并字符串响应?

    来自分类Dev

    如何在React中显示数组的数组?

    来自分类Dev

    为什么Pysnmp在Python 3中将字节保存为字符串

    来自分类Dev

    从将数字保存为字符串的列中获取最小值

    来自分类Dev

    将HTML源代码保存为WinForms应用程序中的字符串

    来自分类Dev

    将 df.show() 的内容保存为 pyspark 中的字符串

    来自分类Dev

    将文件字段保存为 None 但反映数据库中的空字符串

    来自分类Dev

    如何将joptionpane中的输入保存为数组?

    Related 相关文章

    1. 1

      React:在数组的引导轮播项目中显示无序列表

    2. 2

      React:在数组的引导轮播项目中显示无序列表

    3. 3

      TypeScript React:使用字符串数组作为索引并从状态获取值

    4. 4

      如何将数组适配器中的选定项目保存为字符串

    5. 5

      将最新的字符串值保存在React状态Rray中

    6. 6

      如何将字符串保存到数组并在标签中显示字符串?

    7. 7

      将图像在mongodb中保存为Blob,React

    8. 8

      将json数组转换为仅具有react中的json属性值的字符串数组

    9. 9

      将json数组转换为仅具有react中json属性值的字符串数组

    10. 10

      检查字符串数组是否在react中包含子字符串值

    11. 11

      我们应该如何将字符串数据转换为数组并显示为React表

    12. 12

      如何将已更改为字符串的索引数组的项保存为可变Javascript

    13. 13

      将HTML插入用户字符串并在React中呈现(并避免XSS威胁)

    14. 14

      在将输入的defaultValue设置为对象数组中的字符串时,React Array.find()无法正常工作

    15. 15

      将列表列表保存为多行字符串的正确方法?

    16. 16

      迅速将NSUserDefaults保存为TableView的字符串数组

    17. 17

      如何将JavaScript数组保存为Redis列表

    18. 18

      如何将DataFrame保存为列表而不是字符串

    19. 19

      Qt 将字符串保存为 JSON

    20. 20

      使用python替换列表中的字符串并将其保存为其他变量

    21. 21

      根据react中字符串数组中指定的顺序对组件进行排序

    22. 22

      我如何在React Native中的数组内部合并字符串响应?

    23. 23

      如何在React中显示数组的数组?

    24. 24

      为什么Pysnmp在Python 3中将字节保存为字符串

    25. 25

      从将数字保存为字符串的列中获取最小值

    26. 26

      将HTML源代码保存为WinForms应用程序中的字符串

    27. 27

      将 df.show() 的内容保存为 pyspark 中的字符串

    28. 28

      将文件字段保存为 None 但反映数据库中的空字符串

    29. 29

      如何将joptionpane中的输入保存为数组?

    热门标签

    归档