在React Native中从Web服务填充ListView

Question

我有这样一段React Native代码：

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

let styles = require('./styles/styles');

class Sunshine extends Component {

  constructor(props) {
    super(props);
      this.state = {isLoading: true, jsonData: ''}

  }
  componentDidMount() {
    this.setState({jsonData: this.getMoviesFromApiAsync()})
  }
  render() {
    if(this.state.isLoading != true) {
      return (
        <View style={styles.container}>
        <ToolbarAndroid
        style={styles.baseToolbar}
        logo={require('./ic_launcher.png')}
        title="Sunshine"
        titleTextColor="red"/>
        <View style={styles.viewcontainer}>
        <Text>{this.state.jsonData.city.id}</Text>
        <ListView
          dataSource={this.state.jsonData.list}
          renderRow={(rowData) => <Text>{rowData.dt}</Text>}
        />
        </View>
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
        <ToolbarAndroid
        style={styles.baseToolbar}
        logo={require('./ic_launcher.png')}
        title="Sunshine"
        titleTextColor="red"/>
        <View style={styles.singleviewcontainer}>
        <Text>Loading...</Text>
        </View>
        </View>
      );
    }

  }

  getMoviesFromApiAsync() {
      return fetch('http://api.openweathermap.org/data/2.5/forecast/daily?q=94043&mode=json&units=metric&cnt=14&APPID=18dcba27e5bca83fe4ec6b8fbeed7827')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({isLoading: false, jsonData: responseJson});
          console.log(responseJson);
          return responseJson;
        })
        .catch((error) => {
          console.error(error);
        });
    }

}

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

我认为应该在从服务器接收到答案时，用其结果填充列表。但事实并非如此。相反，我得到了以下错误：

undefined is not an object (evaluating 'allRowIDs.length')

那么我到底做错了什么呢？

- Adrian Sicaru

Answer 1

你需要创建一个带有数据列表的ListViewDataSource。

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

componentDidMount () {
  // You don't need to assign the return value to the state
  this.getMoviesFromApiAsync()
}

render () {
  // Use the dataSource
  const rows = this.dataSource.cloneWithRows(this.state.jsonData.list || [])
  ...
  return (
    ...
    <ListView
      dataSource={rows}
    />
  )
}

Full docs here.

- amb

---

它就像魔法一样奏效。谢谢。只有一个问题。你能解释一下这行代码吗：const rows = this.dataSource.cloneWithRows(this.state.jsonData.list || []);，特别是这部分：this.state.jsonData.list || []。再次感谢。 - Adrian Sicaru

如果 this.state.jsonData.list 是 undefined 或者是一个 falsy 值，你需要传递一个空数组给 cloneWithRows 方法。这是一种安全检查，但是如果你在状态中进行以下操作：this.state = { list: [], isLoading: false } 并且始终确保 this.state.list 是一个有效的数组，那么你可以省略它。 - amb