[英]React Native type error: this.props.data.map is not a function
I am doing a single page app in react native. 我在做本机的单页应用程序。 I want to display the fetch response in a list view.
我想在列表视图中显示获取响应。 For accessing the response array i'm using map method but got the above error.The response from my server look like this
为了访问响应数组,我正在使用map方法,但是遇到了以上错误。我服务器的响应如下所示
{
"responseHeader": {
"type": "314",
"status": "200",
"message": "Successfully found the profile"
},
"neighbourProfile": [{
"no_of_mutual_friends": "0",
"username": "Amith Issac",
},
{
"no_of_mutual_friends": "0",
"username": "Liz",
}]
}
How to use map method here?And my app.js is as follows 这里如何使用map方法呢?我的app.js如下
app.js app.js
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import Neighbour from './src/components/Neighbour';
class App extends Component {
state = { neighbours: [] };
componentWillMount(){
const myArray =
{"requestHeader":
{
"personal_id": "122334",
"type":"314"
}
}
fetch(" https://xxxxx",{
method: 'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(myArray)
})
.then((response) => response.json())
.then((responseData) =>this.setState({neighbours: responseData}));
}
renderNeighbour(){
return this.state.neighbours.map(neighbours =>
<Neighbour key ={neighbours.username} neighbours={neighbours}/>
);
}
render() {
return (
<ScrollView>
{this.renderNeighbour()}
</ScrollView>
);
}
}
export default App;
What wrong am i doing? 我在做什么错?
For your case, you have to use responseData.neighbourProfile
to make it work: 对于您的情况,您必须使用
responseData.neighbourProfile
使其起作用:
.then((responseData) =>this.setState({neighbours: responseData.neighbourProfile}));
Since you only take neighbourProfile
into account from your response data. 由于您仅从响应数据中考虑
neighbourProfile
。
According to this answer , you need to do the following to map over a Javascript Object
(like a Python dictionary). 根据此答案 ,您需要执行以下操作以映射到Javascript
Object
(如Python字典)。
Object.keys(someObject).map(function(item)...
Object.keys(someObject).forEach(function(item)...;
// ES way
Object.keys(data).map(item => {...});
Object.keys(data).forEach(item => {...});
This is because only Array
s have a map
method in Javascript; 这是因为只有
Array
在Javascript中具有map
方法; Object
s do not have this method. Object
s没有此方法。
responseData should be an array only.. responseData应该只能是一个数组。
something like this :- 像这样的东西:
responseData = [ { "no_of_mutual_friends": "0", "username": "Amith Issac", }, { "no_of_mutual_friends": "0", "username": "Liz", } ];
while the maps something like this.. usually we cannot use directly from this.state to map as it will become something else.. so, it's better if you assign a variable and get the value from the state.. 虽然映射是这样的..通常我们不能直接使用this.state进行映射,因为它将变成其他东西..因此,最好分配一个变量并从该状态获取值。
renderNeighbour(){ //this one const { neighbours } = this.state; //or this one let neighbours = this.state.neighbours; return neighbours.map((data) => <Neighbour key={data.username} neighbours={neighbours} /> ); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.