Question

我是React Native的新手，对如何正确使用提供的Fetch API感到困惑。

调用本身（如此处所述：http://facebook.github.io/react-native/docs/network.html）很简单，我可以注销成功的响应，但是当需要呈现数据时，它是未定义的。

我希望我可以定义一部空的电影＆＃39;数组，然后通过调用＆＃39; setState＆＃39;来替换它来自componentDidMount（），它将触发重新渲染。这个假设是不正确的吗？

下面的代码示例会导致以下错误：

＆＃39; undefined不是对象（评估＆＃39; allRowIDs.length＆＃39;）

提前感谢您的帮助！

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

class ReactNativePlayground extends Component {

   constructor() {
      super();
      this.state = {
         movies: []
      }
   }

   componentDidMount() {
      fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
         this.setState({
            movies: responseJson.movies
         })
      })
      .catch((error) => {
         console.error(error);
      });
   }

   render() {
      return (
         <View>
            <Text>test</Text>
            <ListView
               dataSource={this.state.movies}
               renderRow={(row) => <Text>{row.title}</Text>}
            />
         </View>
      )
   }
}

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

Answer 1

这是因为您需要将数据放入ListView.DataSource：

constructor (props) {
  super(props);

  const ds = new ListView.DataSource({
    rowHasChanged: (a, b) => a !== b
  })

  this.state = {
    movies: ds.cloneWithRows([])
  }
}

// Inside the response JSON:

this.setState({
  movies: this.state.movies.cloneWithRows(responseJson.movies)
});

React Native ListView docs演示了这种设置。使用数据源允许在渲染数据列表时进行优化（例如注意rowHasChanged函数 - 这可以防止在数据未被更改时不必要地重新呈现行。

何时对React Native Component

1 个答案: