ios - React-Native 嵌套数组

Question

我试图到达一个嵌套数组 4 个对象深处，我的代码基于此处的示例:http://facebook.github.io/react-native/docs/tutorial.html#content

我得到的错误是:

undefined is not an object (evaluating 'Object.keys(dataBlob[sectionID])')

ListViewDataSource.js @ 206:0

cloneWithRowsAndSections ListViewDataSource.js @205:0

cloneWithRows ListViewDataSource.js @166:0

index.ios.js @ 40:0

这是我拥有的 json 示例:

{
    "json": {
        "data": {
            "updated": {
                "$t": "04 Nov 2015 2321 GMT"
            },
            "flux": {
                "$t": "111"
            },
            "aindex": {
                "$t": "41"
            },
            "kindex": {
                "$t": "3"
            },
            "kindexnt": {
                "$t": "No Report"
            },
            "xray": {
                "$t": "B6.0"
            },
            "sunspots": {
                "$t": "95"
            },
            "heliumline": {
                "$t": "131.8"
            },
            "protonflux": {
                "$t": "3.14e-01"
            },
            "electonflux": {
                "$t": "5.46e+02"
            },
            "aurora": {
                "$t": "1"
            },
            "normalization": {
                "$t": "1.99"
            },
            "latdegree": {
                "$t": "67.5"
            },
            "solarwind": {
                "$t": "564.3"
            },
            "magneticfield": {
                "$t": "0.2"
            },
            "calculatedconditions": {
                "band": [
                    {
                        "name": "80m-40m",
                        "time": "day",
                        "$t": "Poor"
                    },
                    {
                        "name": "30m-20m",
                        "time": "day",
                        "$t": "Good"
                    },
                    {
                        "name": "17m-15m",
                        "time": "day",
                        "$t": "Fair"
                    },
                    {
                        "name": "12m-10m",
                        "time": "day",
                        "$t": "Poor"
                    },
                    {
                        "name": "80m-40m",
                        "time": "night",
                        "$t": "Fair"
                    },
                    {
                        "name": "30m-20m",
                        "time": "night",
                        "$t": "Good"
                    },
                    {
                        "name": "17m-15m",
                        "time": "night",
                        "$t": "Fair"
                    },
                    {
                        "name": "12m-10m",
                        "time": "night",
                        "$t": "Poor"
                    }
                ]
            }
        }
    }
}

使用示例，我的 index.ios.js 中有以下内容:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} = React;


var API_URL = 'http://url.com/file.json';
var REQUEST_URL = API_URL;

var HFStatus = React.createClass({
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

  componentDidMount: function() {
    this.fetchData();
  },

  fetchData: function() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.datas),
          loaded: true,
        });
      })
      .done();
  },

  render: function() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderdata}
        style={styles.listView}
      />
    );
  },

  renderLoadingView: function() {
    return (
      <View style={styles.container}>
        <Text>
          Loading datas...
        </Text>
      </View>
    );
  },

  renderdata: function(data) {
    return (
      <View style={styles.container}>
          <Text style={styles.title}>{data.json.data.calculatedconditions.band.name}</Text>
          <Text style={styles.title}>{data.json.data.calculatedconditions.band.time}</Text>
          <Text style={styles.title}>{data.json.data.calculatedconditions.band.$t}</Text>
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
  },
});


AppRegistry.registerComponent('HFStatus', () => HFStatus);

Answer 1

看起来您正在尝试对对象而不是数组运行 clonewithrows。您应该做的是:(here 是您的数据的工作示例)

获取数据:函数(){

  fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.json.data.calculatedconditions.band),
          loaded: true,
        });
      })
      .done();
  }

然后，在 renderdata 函数中:

renderdata: function(data) {
    return (
      <View style={styles.container}>
          <Text style={styles.title}>{data.name}</Text>
          <Text style={styles.title}>{data.time}</Text>
          <Text style={styles.title}>{data.$t}</Text>
      </View>
    );
  },

https://rnplay.org/apps/D2soaw