带有 React Native 的 JsonArray Listview？

Question

这可能是一个愚蠢的问题，我试图从服务器获取 json 数组并将其设置在 listview 中，今天我才开始做 react js，所以有点困惑如何做到这一点得到 null 不是一个对象（评估 'this.state. datasource') 不知道在哪里出错让我发布我的代码到目前为止我尝试过的是 index.android 代码：

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

export default class SecondProject extends Component {
      constructor(props) {
    super(props);
    this.dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  })
  }
  componentDidMount () {
   this.getContractList()
}

  render() {
    this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseJson)});
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={rows}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
    getContractList() {
      return fetch('url')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({isLoading: false, jsonData: responseJson});
        ///  console.log(responseJson);
          return responseJson;
        })
        .catch((error) => {
         // console.error(error);
        });
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SecondProject', () => SecondProject); 

这是来自服务器的 json 响应：

[
        {
        "HeaderText":"Contract Approval",
        "ApprovalType":"C",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Contract Specification Approval",
        "ApprovalType":"CS",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Part Request Approval",
        "ApprovalType":"SPR",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Part Non Return Approval",
        "ApprovalType":"SPNR",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Purchase Request Approval",
        "ApprovalType":"SPRA",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Request Approval",
        "ApprovalType":"SSRA",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        }
]

如何处理这个问题，有人可以帮助我提前谢谢！

Answer 1

试试这样的 -

constructor(props) {
  super(props);

  this.state = {
    jsonData: null
  };

  this.dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  });
}

---

  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        {this.state.jsonData &&
          <ListView
            dataSource={this.dataSource.cloneWithRows(this.state.jsonData)}
            renderRow={(rowData) => <Text>{rowData.title}</Text>}
          />}
      </View>
    );
  }

---

  getContractList() {
    var url = 'https://facebook.github.io/react-native/movies.json';
    fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        this.setState({isLoading: false, jsonData: responseJson.movies});
      })
      .catch((error) => {
       //console.error(error);
      });
  }

Answer 2

我不是 react native 方面的专家，但我注意到在您的 fetch('url')中，URL 没有在任何地方定义。我建议将 Json 的 URL 放在那里。