React Native 类型错误：this.props.data.map 不是函数答案

【问题标题】：React Native type error: this.props.data.map is not a functionReact Native 类型错误：this.props.data.map 不是函数
【发布时间】：2017-12-20 05:00:33
【问题描述】：

我正在做一个反应原生的单页应用程序。我想在列表视图中显示获取响应。为了访问响应数组，我正在使用 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",
  }]
}

这里如何使用map方法？而我的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;

我做错了什么？

【问题讨论】：

你在使用列表视图组件吗？你想从 neighbourProfile 映射吗？
我想列出响应，因为我正在使用这个映射方法

标签： javascript arrays json react-native

【解决方案1】：

对于您的情况，您必须使用responseData.neighbourProfile 使其工作：

.then((responseData) =>this.setState({neighbours: responseData.neighbourProfile}));

因为您只从响应数据中考虑neighbourProfile。

【讨论】：

好的，在渲染方法中我可以这样使用它吗？

【解决方案2】：

根据this answer，您需要执行以下操作以映射到 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 => {...});

这是因为只有Arrays 在Javascript 中有map 方法； Objects 没有这个方法。

【讨论】：

那么你能解释一下我的情况吗？

【解决方案3】：

responseData 应该只是一个数组..

类似这样的：-

    responseData = [
      {
        "no_of_mutual_friends": "0",
        "username": "Amith Issac",
      },
      {
        "no_of_mutual_friends": "0",
        "username": "Liz",
      }
    ];

虽然映射是这样的.. 通常我们不能直接使用 from 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} />
      );
      
    }

【讨论】：