Question

我遇到了对listview数据源的动态数据分配问题。我在构造函数中进行了一次web服务调用，返回jsonArray，然后在收到后我已将接收到的数据（JSONArray）分配给Listview的DataSource。

  `constructor(props){
  let data= this.getActivityCalenderList();
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,
    sectionHeaderHasChanged: (s1, s2) => s1 !== s2});
  this.state = {
  dataSource: ds.cloneWithRowsAndSections(this.convertArrayToMap(data))}
  }
  }
  render()
  {
   return(
     <ListView  dataSource={this.state.dataSource}
      renderRow={(data) =><View>.....</View>}/>}
     renderSectionHeader={(sectionData, startdatetime)=><View>....</View>}
  );
  }`

问题出在数据分配Listview被渲染之前（静态数据分配正在运行）。有任何帮助或建议吗？

Answer 1

您可以通过创建dataObtained状态变量来尝试条件渲染。在componentWillMount上进行api调用，仅在获取数据时显示列表视图。希望这有帮助！

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

componentWillMount (){
    let data = this.getActivityCalenderList();
    this.setState({dataSource: ds.cloneWithRows(data), 
                   dataObtained:true});
}

render()
{
  if(this.state.dataObtained){
    return(
      <ListView  dataSource={this.state.dataSource}
       renderRow={(data) =><View>.....</View>}/>}
       renderSectionHeader={(sectionData, startdatetime)=><View>....
       </View>}
    );
  }else{
    return(
      <View>
        <ActivityIndicator/>
      </View>
    );
  }

}`

React_native：错误undefined不是一个函数（评估'data.forEach）ListView错误

1 个答案: