阵营本地嵌套数组

我试图达成一个嵌套的数组4个对象深，我已经根据我的代码在这里下车的例子：http://facebook.github.io/react-native/docs/tutorial.html#content 阵营本地嵌套数组

我得到的错误是：

不确定是不是一个对象（评价 '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);

来源

2015-11-05 Matthew Brian Sheets

它看起来像你试图在对象而不是数组上运行clonewithrows。你应该做的是这样的：（here是您的数据的工作示例）

fetchData：函数（）{

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

来源

2015-11-05 17:17:19

你好Nader Dabit，尼斯答案，但我仍然混淆从阵列中获取数据并渲染数据，所以请你详细告诉我的例子？我是新来的。 –

这是什么（dataSource：this.state.dataSource.cloneWithRows）我有一个API，我想将该名称呈现到列表视图请帮助。 –

什么是（componentDidMount）什么是（rowHasChanged：（row1，row2）=> row1！== row2，）这我会在每个例子中看到这行，但我不明白为什么我们使用？ –

ListView.DataSource.cloneWithRows方法需要一组数据，并且您似乎将一个对象传递给它。您的示例数据不会提供您的响应的确切格式，但是通过将API响应转换为一组项目应该可以解决问题。

混乱的错误消息的事实， ListView.DataSource有另一种方法，cloneWithRowsAndSections，它允许你分割你的列表视图与粘节头节引起的。该方法反过来期望一个对象，其中每个键表示一个节ID，而value是一个包含属于该节的行项的数组。

看起来，当传递一个对象到cloneWithRows时，React Native默认为cloneWithRowsAndSections行为，但由于该对象不是有效格式，因此渲染失败。

来源

2015-11-05 17:14:24 jevakallio

阵营本地嵌套数组

回答

相关问题