undefined 不是对象（评估“allRowsIDs.length”）（React-Native）答案

【问题标题】：undefined is not an object (evaluating 'allRowsIDs.length') (React-Native)undefined 不是对象（评估“allRowsIDs.length”）（React-Native）
【发布时间】：2016-11-05 00:09:24
【问题描述】：

我对 React-Native 很陌生。按照基本的 React-Native 教程，我正在尝试从“https://facebook.github.io/react-native/movies.json”获取 JSON 数据。我可以显示 title 和 description 属性，但是当我尝试使用 ListView 显示“电影”属性时，我收到以下错误：

undefined 不是一个对象（评估 'allRowsIDs.length'）

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView
} from 'react-native';

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.state = { 
        dataSource: 'init',
    };
  }

  componentWillMount() {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ dataSource: ds.cloneWithRows(responseJson.movies) });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
      return (
        <View style={styles.container}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData}</Text>}
          />
        </View>
      );
  }
}

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

您最初的问题是您已将this.state.dataSource 设置为字符串'init'。您希望它指向您之前声明的数据源。

你可以解决你的第一个问题，如果你改变：

this.state = { 
   dataSource: 'init',
};

到这里：

this.state = {
   dataSource: ds
};

但是，这只会让您看到新的错误消息。 Objects are not valid as a React child... 的效果。您可以通过更改渲染函数以返回简单字符串而不是整个对象来解决此问题。我建议你从标题开始，然后从那里移动。试试这个，你应该可以上路了：

 render() {
      return (
        <View style={styles.container}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData.title}</Text>}
          />
        </View>
      );
  }

【讨论】：

【解决方案2】：

此问题可能是由于尝试使用虚假列表呈现 ListView 造成的。

我刚刚打开了一个我 6 个月没用过的应用程序，它爆炸性地爆炸了，因为数据库被擦除了，这个 ListView 试图渲染并从 Redux mapStateToProps 获取一个空列表。

debug 长话短说，我在 render 方法中放了一个空列表检查：

render() {
  if (!this.props.employees.length) {
    return (
      <View>
        <Text>NO EMPLOYEES TO LIST</Text>
      </View>
    )
  }
  return (
    <ListView
      enableEmptySections
      dataSource={this.dataSource}
      renderRow={this.renderRow}
    />
  )
}

如果你在那之后不知何故继续得到它，请在renderRow 中进行虚假检查。

【讨论】：

【解决方案3】：

根据 react Native 文档 Listview 组件在 React Native 中已弃用。请使用 FlatList 或 SectionList

【讨论】：