Javascript 未捕获（承诺中）类型错误：this.state.[prop].map不是函数

我是新来的。我正在Visual Studio 2017中构建一个组件，用户在其中输入一些文本，并根据这些文本从数据库中获取值，并显示在

div

中。下面是我正在使用的类和接口

interface ISearchForm {
  suggestionList: ISuggestionList[];
  searchText: string;
}

interface ISuggestionList {
  queryDetails: IQueryDetails;
  data: IDataForUsers[];
}

interface IQueryDetails {
  search: string;
  returncount: number;
  skip: number;
  top: number;
}

interface IDataForUsers {
  users: IUsers[];
}

interface IUsers {
  profileId: string;
  firstName: string; 
  middleName: string;
  lastName: string;
}  

我之所以拥有如此复杂的结构，是因为API返回一个复杂的JSON，如下所示：

"querydetails": {
  "search": "sample string 1",
  "returncount": 2,
  "skip": 3,
  "top": 4
},
"data": {
  "users": [{
    "profileId": "sample string 1",
    "firstName": "sample string 2", //I want to retrieve array of this key for every user
    "middleName": "sample string 3",
    "lastName": "sample string 4",
  }, {
    "profileId": "sample string 1",
    "firstName": "sample string 2",
    "middleName": "sample string 3",
    "lastName": "sample string 4",
  }]
}

下面是我的班级。现在，整个代码都在typescript中：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
export class Search extends React.Component<RouteComponentProps<{}>, 
ISearchForm> {
  constructor() {
    super();
    this.state = { suggestionList: [], searchText: '' };
    this.handleSerachTextChange = this.handleSerachTextChange.bind(this);
  }//Some more code after this
}

这就是我的渲染方法的样子。当我尝试使用

this.state.suggestionList.map（）

时，它在运行时给了我一个错误

我创建内部

div

的原因是

public render（）{
返回
{
this.state.suggestionList.map（（dataArray）=>{
{
dataArray.data.map（（usersList）=>{
{
usersList.users.map（（userArray）=>{
{
userArray.firstName
}
})
}
})
}
})
}
}

有人能告诉我为什么我会犯这个错误吗？或者如何检索所有用户的

firstName

s列表？我不想更改从API调用中得到的响应。任何帮助都将不胜感激

看看这个：

.then(response => response.json() as Promise<ISuggestionList[]>)
.then(data => {
    this.setState({ suggestionList: data });
});

.then（response=>response.json（）作为承诺）
。然后（数据=>{
this.setState（{suggestionList:data}）；
});

this.state.suggestionList

最初是一个数组，但该代码块将其设置为某种程度上不是数组

替换

this.setState（{suggestionList:data}）

by

this.setState（{suggestionList:data.users}）
看看这个：

.then(response => response.json() as Promise<ISuggestionList[]>)
.then(data => {
    this.setState({ suggestionList: data });
});

.then（response=>response.json（）作为承诺）
。然后（数据=>{
this.setState（{suggestionList:data}）；
});

this.state.suggestionList
最初是一个数组，但该代码块将其设置为某种程度上不是数组

替换
this.setState（{suggestionList:data}）
by
this.setState（{suggestionList:data.users}）
如果您的
建议列表
等于您收到的数据，
数据
不是数组，而是对象，您不能对其进行迭代。因此，在我看来，您可以像这样迭代您的用户列表：

尝试使用更新您的初始状态

this.state = { suggestionList: { data: null }, searchText: '' };

然后更新渲染效果

<div>
  {
     this.state.suggestionList.data ?
       this.state.suggestionList.data.users.map(user => <div>{user.firstName}</div>) : 
       null
  }
</div>


{
这个.state.suggestionList.data？
this.state.suggestionList.data.users.map（user=>{user.firstName}）：
无效的
}
如果您的
建议列表
等于您收到的数据，
数据
不是一个数组而是一个对象，您不能对它进行迭代。因此，在我看来，您可以像这样迭代您的用户列表：

尝试使用更新您的初始状态

this.state = { suggestionList: { data: null }, searchText: '' };

然后更新渲染效果

<div>
  {
     this.state.suggestionList.data ?
       this.state.suggestionList.data.users.map(user => <div>{user.firstName}</div>) : 
       null
  }
</div>


{
这个.state.suggestionList.data？
this.state.suggestionList.data.users.map（user=>{user.firstName}）：
无效的
}
在代码中，您希望JSON结果的类型为
ISuggestionList[]
。但这根本不匹配。在尝试其他操作之前，需要先修复类型


JSON结果的类型为
IsSuggestionList
，而不是该类型的数组
类似地，
ISuggestionList
内部的
data
也不是数组，而是具有
users
属性的对象。所以它是
IDataForUsers
（同样没有数组）
由于JSON只是一个
isSuggestionList
，
ISearchForm
也不应该有多个
isSuggestionList
元素

一旦您修复了这个问题，您应该会得到编译器错误，这些错误将引导您正确使用对象。然后您还将认识到，您不能在
state.suggestionList
上使用
map
，因为它不是数组

此外，还应该调整类型的命名。对于表示单个事物的事物，您应该使用单数名称，而不是在实际的事物列表中调用
List
。
在代码中，您希望JSON结果的类型为
ISuggestionList[]
。但这根本不匹配。在尝试其他操作之前，需要先修复类型


JSON结果的类型为
IsSuggestionList
，而不是该类型的数组
类似地，
ISuggestionList
内部的
data
也不是数组，而是具有
users
属性的对象。所以它是
IDataForUsers
（同样没有数组）
由于JSON只是一个
isSuggestionList
，
ISearchForm
也不应该有多个
isSuggestionList
元素

一旦您修复了这个问题，您应该会得到编译器错误，这些错误将引导您正确使用对象。然后您还将认识到，您不能在
state.suggestionList
上使用
map
，因为它不是数组

此外，还应该调整类型的命名。对于表示单个事物的事物，您应该使用单数名称，而不是在实际的事物列表中调用某个
List
。
它会给我一个编译时错误。属性“users”在类型“IsSuggestionList[]”上不存在。我知道了，请将您的状态设置为
this.setState（{suggestionList:data.da