wake-up-neo.com

undefined ist kein Objekt (wertet 'allRowsIDs.length' aus) (React-Native)

Ich bin sehr neu bei React-Native. Dem grundlegenden React-Native-Tutorial folgend versuche ich, JSON-Daten von " https://facebook.github.io/react-native/movies.json " abzurufen. Ich kann die Eigenschaften title und description anzeigen, aber wenn ich versuche, die Eigenschaft "movies" mithilfe einer ListView anzuzeigen, erhalte ich die folgende Fehlermeldung:

undefined ist kein Objekt (wertet 'allRowsIDs.length' aus)

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

Ihr anfängliches Problem ist, dass Sie this.state.dataSource auf die Zeichenfolge 'init' gesetzt haben. Sie möchten, dass das auf die zuvor deklarierte Datenquelle verweist.

Sie können Ihr erstes Problem lösen, wenn Sie sich ändern:

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

zu diesem:

this.state = {
   dataSource: ds
};

Dies führt jedoch nur zu einer neuen Fehlermeldung. Etwas zur Wirkung von Objects are not valid as a React child.... Sie können dies beheben, indem Sie Ihre Renderfunktion so ändern, dass eine einfache Zeichenfolge und nicht das gesamte Objekt zurückgegeben wird. Ich schlage vor, dass Sie mit dem Titel beginnen und von dort fortfahren. Probieren Sie dies aus und Sie sollten auf dem Weg sein:

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

Dieses Problem kann dadurch verursacht werden, dass versucht wird, ListView mit einer falschen Liste zu rendern.

Ich habe gerade eine App geöffnet, die ich seit 6 Monaten nicht mehr benutzt hatte, und sie explodierte fantastisch, weil die Datenbank gelöscht wurde und diese ListView zu rendern versuchte und eine leere Liste von Redux mapStateToProps erhielt.

Lange Debug-Story kurz, ich füge eine leere Liste in der Render-Methode ein:

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

Wenn Sie es später irgendwie bekommen, setzen Sie einen falschen Check in renderRow.

0
agm1984