Question

我正在尝试深入到达嵌套数组4个对象，我已将代码基于示例：http://facebook.github.io/react-native/docs/tutorial.html#content

我得到的错误是：

undefined不是一个对象（评估   ＆＃39; Object.keys（dataBlob [sectionID]）＆＃39）

ListViewDataSource.js @ 206：0

cloneWithRowsAndSections ListViewDataSource.js @ 205：0

cloneWithRows ListViewDataSource.js @ 166：0

index.ios.js @ 40：0

这是我所拥有的json的一个例子：

/**
 * 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);

使用示例我在index.ios.js中有以下内容：

$results = SQLQuery -connectionString $connectionString  -query $query;
$results[0] = '';
foreach ($r in $results) {
    Add-Content $skus $r[0]; 
}

Answer 1

看起来您正在尝试在对象而不是数组上运行clonewithrows。你应该做的是：（here是你的数据的一个工作示例）

fetchData：function（）{

  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

Answer 2

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

令人困惑的错误消息是由以下事实引起的 ListView.DataSource有另一种方法cloneWithRowsAndSections，允许您将列表视图拆分为带有粘性节标题的部分。此方法反过来需要一个对象，其中每个键表示一个部分ID，value是一个包含属于该部分的行项的数组。

看来，当将对象传递给cloneWithRows时，React Native默认为cloneWithRowsAndSections行为，但由于该对象的格式不正确，渲染失败。

React-Native嵌套数组

2 个答案: