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

Question

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

undefined is not an object (evaluating '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>
      );
  }
}

Answer 1

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

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

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

对此：

this.state = {
   dataSource: ds
};

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

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

Answer 2

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

我刚刚打开了一个我已经有 6 个月没用过的应用程序，它突然爆炸了，因为数据库被擦除了，这个 ListView 正在尝试渲染并从 Redux mapStateToProps.

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

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 中进行虚假检查。

Answer 3

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

如需更多优惠，请选择：- https://facebook.github.io/react-native/docs/listview.html

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

undefined is not an object (evaluating 'allRowsIDs.length') (React-Native)

react-native

react-native-android