为什么我得到的类型'字符串[]|未定义'不是一个数组类型."我的对象变量？

Question

我试图创建一个名为hidden的状态变量作为字典（例如：[{'cutomkey1'：'somevalue'，'customkey2'：'somevalue'}]）。隐藏可以是空的[{}]。

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

我一直在提示这个错误：

类型'String[]|未定义'不是数组类型。

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

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,
    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)
        if (this.state.hidden) {
            this.setState({
                hidden: [...this.state.hidden, {dict}]
            })
        }
        console.log(this.state.hidden)
        parent.classList.add('hideTkt')
    }

这就是错误：

键入“（字符串|{dict:Map

Answer 1

如果你仔细阅读创建隐藏数组的代码，

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

您可以看到您扩展了state.hidden元素（没有pb，它们已经是正确的类型，任何类型，我们都无所谓，因为它们来自以前的类型良好且构建良好的数组），但是，然后您添加了一个literal对象，该对象具有名为dict的属性，类型为Map

这意味着您的数组将包含具有与此接口相关的“dict”属性的对象：{dict:Map

你能做的是：

1. 键入隐藏为数组

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

然后将数组键入array

还有很多其他的选择，但这些是你可以遵循的主要途径。最后，如果您真的希望“隐藏”状态变量是一个字典，请将其键入映射

     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])
            })
        }

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

Answer 2

声明隐藏？：数组

使用这样的属性将失败：

hidden.push（项目）

因为隐藏可以是未定义（并且未定义没有属性推送）。

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

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

或者你可以提供一个默认值使用空隐藏：

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