类型 'undefined' 必须有一个返回迭代器的 '[Symbol.iterator]()' 方法答案

【问题标题】：Type 'undefined' must have a '[Symbol.iterator]()' method that returns an iterator类型 'undefined' 必须有一个返回迭代器的 '[Symbol.iterator]()' 方法
【发布时间】：2019-10-04 03:29:15
【问题描述】：

我正在尝试将我的减速器从 JS 转换为 typescript，但我遇到了一个我无法解决的奇怪错误。该错误来自在reducer [...state.messages] 中使用省略号进行数组解构。基本上代码如下：减速机：

import { HomeScreenAction } from '../actions';
import { HomeState, User, Message } from '../types';
import * as constants from '../constants';
import { combineReducers } from 'redux';

export function userState(state: HomeState = {}, action: 
HomeScreenAction): HomeState {
switch (action.type) {
case constants.REQUEST_USER:
case constants.RECEIVE_USER:
  return { user: action.user };
default:
  return state;
}
}


export function messagesState(state: HomeState = {}, action: 
HomeScreenAction):HomeState {
switch (action.type) {
case constants.REQUEST_MESSAGES:
case constants.RECEIVE_MESSAGES:
  return { messages: action.messages };
case constants.Test1:
  return{ ...state, user: action.payload};
case constants.Test2:
  return {...state, messages:[ ...state.messages, action.payload ]};
default:
  return state;
}
}

const rootReducer = combineReducers({
userState,
messagesState
});

export default rootReducer;

类型：

export interface HomeState {
user?: User;
messages?: Message[];
}
export interface Test1 {
type: typeof constants.Test1
payload: User
}

export interface Test2 {
type: typeof constants.Test2
payload: Message
}

和 tsconfig.js：

  "compilerOptions": {
/* Basic Options */
"target": "es6",                          
"watch": false,
"module": "commonjs",
 "lib":  [ "dom", "es6", "es2015" , "dom.iterable"],
// "allowJs": true,
// "checkJs": true,
"jsx": "react",
// "declaration": true,
"sourceMap": true,
// "outFile": "./",
"outDir": "./lib",

"strict": true

},
"include": ["./src/"]
}

我尝试了不同的库，例如 es2015 和 es5，但我仍然收到错误

[...state.messages]

任何帮助将不胜感激。

【问题讨论】：

当您将鼠标悬停在state.messages 上时，它会显示什么类型？这也是编译错误还是运行时错误？
错误:(34, 39) TS2488: 类型“未定义”必须有一个返回迭代器的“[Symbol.iterator]()”方法。不，我只是进入 webstorm，所以编译时间。我还没有运行它。
能否贴出[...state.messages]的周边代码/函数/类
它在第一个代码中的reducer部分sn-p在帖子中。

标签： reactjs typescript react-redux

【解决方案1】：

由于messages 是HomeState 中的可选属性，消息可以是undefined，在这种情况下，数组解构时会出现运行时错误。

为了防止出现运行时错误，TS 抛出编译时错误。

解决此问题的最简单方法是检查 state.messages 是否为空并使用空数组进行初始化。示例：

 case constants.Test2:
   let messages: Message[] = state.mesaage || [];
   return {...state, messages:[ ...messages, action.payload ]};

【讨论】：