为什么我的对象变量会"Type 'String[] | undefined' is not an array type."？

Question

我试图创建一个名为hidden的状态变量作为字典(例如:[{'cutomkey1':'somevalue', 'customkey2':'somevalue'}])。可为空[{}]

在我的一个方法中，我想把一个项目{'asd':'asd'}推到隐藏的状态变量并把它们加起来。

我一直得到这个错误:

Type 'String[] | 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')
}

这是错误:

Type '(String | {dict: Map;})[]'是不可分配的键入'String[]'。Type 'String ' | {dict: Map;} '不能赋值给类型'String'。键入"{字典:映射<字符串，字符串>;"}'不能赋值给类型'String'。对象字面量只能指定已知的属性，并且'dict'在'String'类型中不存在。

Answer 1

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

像这样使用属性会失败:

hidden.push(item)

因为hidden可以是undefined(undefined没有push属性)。

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

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

或者您可以使用null隐藏提供默认值:

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

Answer 2

如果你仔细阅读创建'hidden'数组的代码，

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

你可以看到你扩展了状态。隐藏元素(没有pb，它们已经是正确的类型，任何类型，我们不关心，因为它们来自之前的良好类型和构建的数组)，但是，然后你添加一个文字对象，它有一个名为dict的属性，类型为Map<string, string>。

这意味着你的数组将包含有"dict"属性关于这个接口:{dict:Map<string,string>}。这就是为什么你会有这个奇怪的错误消息，关于这个对象literal的dict属性在字符串类型中不存在(显然，数组中的项不是字符串)

你可以做的是:

1. 类型隐藏为Array<{dict:Map<string,string>}>.
2. 在构建数组时将Map<string,string>的内容扩展到数组内(hidden : [...this.state.hidden,...dict])，这将导致您拥有Array<Record<string,string>>(Record<K,V>是您在地图中拥有的每个键值对项目的类型)
3. 创建如下接口:

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

然后输入Array <MyInterface>

4. 使用Array.from(dict.entries())m方法获得元组数组([key:string,value:string])，然后使用数组映射操作符将条目转换为在这种情况下更好地满足您需要的内容(可能是您首先想要的字符串)，方法是将每个元组项的键和值(或任何其他提供唯一字符串的内容)连接起来。换句话说，如果你只保留你从" array。from"，您将拥有您想要的那种结构(一个键值对元组数组)

还有很多其他选择，但这些是您可以遵循的主要轨道。最后，如果你真的想要你的"隐藏"状态变量为字典，将其键入为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)。如果不是，那么在这里使用Map有什么意义呢?