陣營本地嵌套數組

我試圖達成一個嵌套的數組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

陣營本地嵌套數組

回答

相關問題