为什么我收到“类型‘String[]|未定义’不是数组类型。” 对于我的对象变量？

Question

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

在我的一种方法中，我想将一个项目推{'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,
    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')
    }

这是错误：

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

Answer 1

该声明hidden?: Array<String>,意味着该属性可以是Array<String>OR undefined。

像这样使用该属性将会失败：

hidden.push(item)

因为hidden可能是undefined（并且undefined没有财产push）。

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

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

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

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