React Native：何時/如何啓動網絡請求？

Question

在使用React Native時，我偶然發現了一個我不確定如何解決的問題。我有一個主要NavigatorIOS查看其中的內容push和pop各地的意見。我最初設置的方式是，網絡請求將在componentDidMount開始。然而，開始發生的事情是，導航的「推動」（移動到下一個屏幕的動畫）將被延遲直到實際請求完成（即使加載使用fetch，承諾和async/await函數） 。我設法通過將網絡請求代碼包裝在setTimeout(fn, 0)調用中來抵消大部分這些問題，但我不確定這是否是處理此問題的正確方法。​​和InteractionManager.runAfterInteractions都沒有工作，甚至setTimeout是finicky。有沒有更好的方法來做到這一點？

爲了方便說明，這大約是我的代碼是如何工作的（僞代碼）：

屏幕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 
    }; 
    } 

https://facebook.github.io/react/tips/initial-ajax.html

Answer 2

的setState功能不會立即觸發事件的渲染，所以startLoading不需要第一線。像維尼的回答那樣，設定初始狀態是更好的解決方案。

我看到你在使用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 {}; 
}