Question

我是React的新手。我正在Visual Studio 2017中构建一个组件，用户在其中输入一些文本，并根据该组件从数据库中提取值并显示在76364 blah@blah.com 0 0 0 1 11111 null@null.com NULL NULL NULL NULL 62626 test@test.com 0 0 0 1中。下面是我正在使用的类和接口。

div

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

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;
}

以下是我的课程。现在整个代码都是打字稿：

"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",
  }]
}

在文本更改事件中，我进行了API调用并将响应分配给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 }

suggestionList[]

这就是我的渲染方法的样子。当我尝试使用handleSerachTextChange(e: any) { this.setState({ searchText: e.target.value }); this.setState({ suggestionList: [] }); if (e.target.value == '') {} else { var propsForAPI = { search: e.target.value, skip: 0, top: 10 }; var jsonData = JSON.stringify(propsForAPI); fetch('apiURL', { method: 'POST', headers: { 'Content-type': 'application/json' }, body: jsonData }) .then(response => response.json() as Promise<ISuggestionList[]>) .then(data => { this.setState({ suggestionList: data }); }); } }时，它在运行时给出了错误。

我创建内心this.state.suggestionList.map()的原因是this video。

div

有人能告诉我为什么会收到此错误吗？或者我如何为所有用户检索public render() { return <div> <input type="text" value={this.state.searchText} onChange={this.handleSerachTextChange} /> <div> { this.state.suggestionList.map((dataArray) => { <div> { dataArray.data.map((usersList) => { <div> { usersList.users.map((userArray) => { <div> { userArray.firstName } </div> }) } </div> }) } </div> }) } </div> </div> }的列表？我不想更改我从API调用中获得的响应。任何帮助，将不胜感激。

Answer 1

在您的代码中，您希望JSON结果的类型为ISuggestionList[]。但这与完全不匹配。在尝试其他任何操作之前，您需要修复类型。

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

修复后，您应该收到编译错误，指导您正确使用对象。然后您还会意识到您无法在map上使用state.suggestionList，因为它不是数组。

此外，您应该真正调整类型的命名。你应该使用单数名称来表示单个事物，而不是在事物列表实际列表时调用List。

Answer 2

看看这个：

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

this.state.suggestionList最初是一个数组，但是那段代码将它设置为某个数组。

将this.setState({ suggestionList: data });替换为this.setState({ suggestionList: data.users });

Answer 3

如果您的suggestionList等于您收到的数据，data不是数组而是对象，则无法对其进行迭代。因此，在我看来，您可以像这样迭代您的用户列表：

尝试使用

更新初始状态

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

然后更新您的渲染

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

未捕获（承诺）TypeError：this.state。[prop] .map不是函数

3 个答案: