React-Native 通过 Tutorial Facebook 获取 JSON 返回错误答案

【问题标题】：React-Native fetch JSON by Tutorial Facebook return ErrorReact-Native 通过 Tutorial Facebook 获取 JSON 返回错误
【发布时间】：2017-06-12 17:20:10
【问题描述】：

React-Native 通过 Tutorial Facebook 获取 JSON 返回错误

null is not an object 错误（评估“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;

【问题讨论】：

标签： android ios json facebook react-native

【解决方案1】：

我认为问题在于这个链接https://facebook.github.io/react-native/movies.json 它返回 404 page not found。您可以尝试使用另一个 json 链接或在这里找到您需要的数据https://github.com/facebook/react-native/blob/master/website/src/react-native/movies.json

【讨论】：

【解决方案2】：

就在componentWillMount上方做：

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

【讨论】：

插入此代码后出现错误 can't find variable: ds 我该如何处理此错误
state = { dataSource: ds.cloneWithRows([]), } 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 }); })
哦，是的，我会更新我的答案以使用构造函数来定义 ds。
好的。非常感谢:)

【解决方案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/> 组件相同，但要好得多。

【讨论】：