为什么我会收到“类型 'String[] | undefined' 不是数组类型”对于我的对象变量？

如何解决为什么我会收到“类型 'String[] | undefined' 不是数组类型”对于我的对象变量？

我正在尝试创建一个名为 hidden 的状态变量作为字典（例如：[{'cutomkey1':'somevalue','customkey2':'somevalue'}]）。 hidden 可以为空 [{}]。

在我的一种方法中，我想将项目 {'asd':'asd'} 推送到隐藏状态变量并将它们相加。

我一直收到这个错误：

输入'字符串[] | undefined' 不是数组类型。

我是打字稿的新手，我不确定我是否正确设置了所有变量。这是我的代码（仅相关部分）：

import React from 'react';

export type AppState = {
    tickets?: Ticket[],hidden?: Array<String>,search: string;
}

export class App extends React.PureComponent<{},AppState> {

    state: AppState = {
        search: '',hidden: [] 
    }

    hideCard = (e: React.SyntheticEvent<EventTarget>) => {
        let targ = e.target as HTMLElement
        let parent = targ.parentElement as HTMLElement  
        let dict: Map<string,string> = new Map();
        dict.set(parent.id,parent.id)
        this.setState({
            hidden: [...this.state.hidden,{dict}]
        })
        console.log(this.state.hidden)
        parent.classList.add('hideTkt')
    }



}

export default App;

新代码：

export type AppState = {
    tickets?: Ticket[],hidden?: Array<String> | undefined,hidden: [] 
    }


    hideCard = (e: React.SyntheticEvent<EventTarget>) => {
        let targ = e.target as HTMLElement
        let parent = targ.parentElement as HTMLElement  
        let dict: Map<string,parent.id)
        if (this.state.hidden) {
            this.setState({
                hidden: [...this.state.hidden,{dict}]
            })
        }
        console.log(this.state.hidden)
        parent.classList.add('hideTkt')
    }

这是错误：

类型 '(String | { dict: Map; })[]' 不可赋值 键入“字符串[]”。输入'字符串| { 字典：地图； }' 不可分配给类型“字符串”。 输入 '{ dict: Map; }' 不可分配给类型 'String'。 对象字面量只能指定已知属性，而“字符串”类型中不存在“dict”。

解决方法

声明 hidden?: Array<String>, 表示该属性可以是 Array<String> 或 undefined。

使用这样的属性会失败：

hidden.push(item)

因为 hidden 可能是 undefined（并且 undefined 没有属性 push）。

如果您检查 this.state.hidden 是否可用，打字稿将不再抱怨：

if(this.state.hidden)
  this.setState({
              hidden: [...this.state.hidden,{dict}]
          })

或者您可以使用无效隐藏提供默认值：

...(this.state.hidden ?? [])

,

如果您仔细阅读了创建“隐藏”数组的代码，

     if (this.state.hidden) {
            this.setState({
                hidden: [...this.state.hidden,{dict}]
            })
        }

你可以看到你传播了 state.hidden 元素（这些元素没有 pb，它们已经是正确的类型，任何类型，我们都无所谓，因为它们来自以前的类型和构建良好的数组）,但是，然后您添加了一个具有名为 dict 的属性的文字对象，类型为 Map<string,string>。

这意味着您的数组将包含具有与此接口相关的“dict”属性的对象：{dict:Map<string,string>}。 这就是为什么您会收到关于此对象文字的奇怪错误消息，其中 dict 属性在字符串类型中不​​存在（显然，您的数组中的项目不是字符串）

你能做的是：

1. 输入 hidden 作为 Array<{dict:Map<string,string>}>。
2. 在构建数组时将 Map<string,string> 的内容传播到数组中 (hidden : [...this.state.hidden,...dict]) ，这将导致您拥有一个 Array<Record<string,string>>（Record<K,V> 是您 Map 中每个键值对项的类型）
3. 创建一个界面，如：

    interface MyInterface
     { 
      dict:Map<string,string>;
    }

然后将您的数组输入为 Array <MyInterface>

4. 使用 Array.from(dict.entries()) 方法获取元组数组 ([key:string,value:string])，然后使用数组映射运算符将您的条目转换为在这种情况下更好地满足您需要的内容（可能是您的字符串）首先需要）通过连接每个元组项目的键和值（或任何其他给你一个唯一字符串的东西）。换句话说，如果您只保留从 "Array.from" 获得的数组，您将拥有所需的结构类型（keyValue Pair 元组数组）

还有很多其他选项，但这些是您可以遵循的主要路径。 并且，最后，如果你真的希望你的“隐藏”状态变量是一个字典，从一开始就将它输入为 Map ，当你重新影响它时，就做

     if (this.state.hidden) {
            this.setState({
                hidden: new Map([...Array.from(this.state.hidden.entries()),...Array.from(dict.entries())])
            })
        }

如果你的目标是 ES6，你不必做所有这些练习，因为这会起作用：

     if (this.state.hidden) {
            this.setState({
                hidden: new Map([...this.state.hidden,...dict])
            })
        }

而且，顺便说一句，我认为当你在你的 Map 中设置对象时，你想要做 dict.set(target.id,parent.id) 而不是 dict.set(parent.id,parent.id) 。如果不是，在这里使用地图有什么意义？