通過教程Facebook React-Native獲取JSON返回錯誤

Question

通過教程Facebook React-Native獲取JSON返回錯誤

空值錯誤不是對象（評估“ this.state.datasource”）

我該如何處理我的代碼

class ModuleRecView extends Component {
    componentWillMount() {

      return fetch('https://facebook.github.io/react-native/movies.json')
         .then((response) => response.json())
         .then((responseJson) => {
           let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
           this.setState({
             isLoading: false,
             dataSource: ds.cloneWithRows(responseJson.movies),
           }, function() {
             // do something with new state
           });
         })
         .catch((error) => {
           console.error(error);
         });

    }
    render() {

      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData.title}, {rowData.releaseYear}</Text>}
          />
        </View>
      );
    }
}

export default ModuleRecView;

Answer 1

我認為問題出在此鏈接https://facebook.github.io/react-native/movies.json，它返回未找到404頁面。 您可以嘗試使用其他json鏈接或在此處找到所需的數據https://github.com/facebook/react-native/blob/master/website/src/react-native/movies.json

Answer 2

在componentWillMount上方執行以下操作：

constructor() {
  super();
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows([]),
  };
}

Answer 3

我通常這樣做：

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

class ModuleRecView extends Component {
  state = {
    datasource: new ListView.DataSource({rowHasChanged: (r1, r2) => r2 !== r2}),
    isLoading: true
  }

  componentWillMount() {
    fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
       this.setState({
         isLoading: false,
         dataSource: this.state.datasource.cloneWithRows(responseJson.movies),
       }, () => {
         // do something with new state
       });
    })
    .catch((error) => {
      console.error(error);
    });
  }

  render() {
    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <ListView
          dataSource={this.state.datasource}
          renderRow={(rowData) => <Text>{rowData.title}, {rowData.releaseYear}</Text>}
        />
      </View>
    );
  }
}

export default ModuleRecView;

請注意，RN現在有一個名為< FlatList />的新組件，它與<ListView/>組件相同，但要好得多。