Question

我无法在listview中显示json数据。我在console.log中获取了json数据，但在listview中没有，isLoading总是为false。我没有收到任何错误.catch（error =＆gt; console.warn（“error”））。屏幕上的结果是第一个View，因为this.state.isLoading为false。

这是一段代码：

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

var productArray = [];

class ListViewDemo extends Component {
   constructor(props) {
    console.warn("constructor");
    super(props);
    var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid});
   this.state = {
      dataSource: dataSource.cloneWithRows(productArray),
     isLoading:true
   }
 }

  componentDidMount() {
    console.warn("componentDidMount");
    this.getTheData(function(json){
     productArray = json;
      console.warn(productArray);
     this.setState = ({
       datasource:this.state.dataSource.cloneWithRows(productArray),
       isLoading:false
     })
    }.bind(this));   
     console.warn("component ->  " + this.state.isLoading);
  }

  getTheData(callback) {
    console.warn("callback");
    var url = "https://raw.githubusercontent.com/darkarmyIN/React-Native-DynamicListView/master/appledata.json";
fetch(url)
     .then(response => response.json())
     .then(json => callback(json))
     .catch(error => console.warn("error"));
   }

  renderRow(rowData, sectionID, rowID) {
    console.warn("renderRow");
    return (
        <TouchableHighlight underlayColor='#dddddd' style={{height:44}}>
         <View>
         <Text style={{fontSize: 20, color: '#000000'}} numberOfLines={1}>{rowData.display_string}</Text>
         <Text style={{fontSize: 20, color: '#000000'}} numberOfLines={1}>test</Text>
         <View style={{height: 1, backgroundColor: '#dddddd'}}/>
        </View>
    </TouchableHighlight>
);
}

   render() {
   console.warn("render" + this.state.isLoading);
   var currentView = (this.state.isLoading) ? <View style={{height: 110, backgroundColor: '#dddddd'}} /> : <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} enableEmptySections={true}/>
   return(
     <View>
       {currentView}
     </View>
   );
  }
}

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => ListViewDemo);

Answer 1

我在这里看到了几个错误。

在componentDidMount，您正在设置datasource dataSource的内容：

  componentDidMount() {
    console.warn("componentDidMount");
    this.getTheData(function(json){
     productArray = json;
      console.warn(productArray);
     this.setState = ({
       //datasource:this.state.dataSource.cloneWithRows(productArray),
       dataSource:this.state.dataSource.cloneWithRows(productArray),
       isLoading:false
     })
    }.bind(this));   
     console.warn("component ->  " + this.state.isLoading);
  }

这就是为什么你无法渲染的原因，因为永远不会填充dataSource。这只是一个拼写错误。

你可能没有进入你的getTheData方法中的第二个，因为你没有返回一个Promise：

getTheData(callback) {
  console.warn("callback");
  var url = "https://raw.githubusercontent.com/darkarmyIN/React-Native-DynamicListView/master/appledata.json";
  fetch(url)
     //.then(response => response.json())
     .then(response => return response.json())
     .then(json => callback(json))
     .catch(error => console.warn("error"));
   }

你的setState犯了错误，你正在分配它而不是叫它：

 //this.setState = ({
 //  datasource:this.state.dataSource.cloneWithRows(productArray),
 //  isLoading:false
 //})

 this.setState({
   dataSource:this.state.dataSource.cloneWithRows(productArray),
   isLoading:false
 })

让我知道它是否有效。

Answer 2

您正在设置功能setState而不是调用它

this.setState = ({ datasource:this.state.dataSource.cloneWithRows(productArray), isLoading:false })

应该是

this.setState({ datasource:this.state.dataSource.cloneWithRows(productArray), isLoading:false })

ReactNative ListView与Json Api

2 个答案: