Question

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

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>
      );
  }
}

Answer 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>
      );
  }

Answer 2

尝试使用虚假列表呈现ListView可能会导致此问题。

我刚刚打开了一个我在6个月内没有使用过的应用程序，因为数据库被擦除而且ListView正在尝试渲染并从Redux {{1}获取一个空列表}。

长调试故事简短，我在渲染方法中放入一个空列表检查：

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} /> ) }进行虚假检查。

Answer 3

据此在React Native中弃用本机文档 Listview组件 。请使用 FlatList 或 SectionList

要获得更多建议，请：-https://facebook.github.io/react-native/docs/listview.html

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

3 个答案: