React Native：何时/如何启动网络请求？

Question

在玩React Native时，我偶然发现了一个我不确定如何解决的问题。我有一个主NavigatorIOS视图，其中包含各种视图的内容push和pop。我最初设置它的方式是在componentDidMount中启动网络请求。然而，开始发生的事情是＆＃34;推动＆＃34;导航（移动到下一个屏幕的动画）将被延迟，直到实际请求完成（即使加载使用fetch，promises和async/await函数）。我设法通过在setTimeout(fn, 0)调用中包装网络请求代码来抵消大多数这些问题，但我不确定这是否是处理此问题的正确方法。 requestAnimationFrame和InteractionManager.runAfterInteractions都不起作用，甚至setTimeout都很挑剔。有没有更好的方法来做到这一点？

仅用于说明，这与我的代码的工作原理大致相同（伪代码）：

屏幕1 ：

<TouchableHighlight onPress={() => this.navigator.push({ data })} />

屏幕2 ：

componentDidMount() {
  this.startLoading();
}

startLoading() {
  this.setState({ items: [], loading: true });
  this.load().then(items => this.setState({ items, loading: false }));
}

async load() {
  const contents = await fetch(this.props.url);
  // Process contents.
  return items;
}

Answer 1

您是否尝试过在getInitialState中设置默认数据？

var TouchableHighlight = React.createClass({
  getInitialState: function() {
    return {
      items: [],
      loading: true
    };
  }

Answer 2

setState函数不会立即触发渲染事件，因此startLoading不需要第一行。像Vinnie的回答一样，设置一个初始状态是一个更好的解决方案。

我看到你正在使用es7，但你可以尝试一下吗？

componentDidMount() {
    fetch(this.props.url)
        .then(result => this.setState({items: processContents(result), loading: false}))
        .catch(e => console.log("error", e))
}

processContents(fetchResult) {
    // do whatever
    return {};
}