如何在 react native 的获取 API 中等待服务器响应时执行操作？

Question

React Native 文档显示了 React-Native 的 fetch API 的以下代码：

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

我正在寻找的是fetch调用服务器时放置加载脚本之类的东西的地方，类似于以下非工作代码：

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .whileWating(() => {
      // This is the type of thing I want to put into the fetch
      console.log('Waiting for the server response.') 
    })
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
 }

Answer 1

通常解决此问题的方法是更新状态。这样：

获取：

this.setState({isLoading: true});
fetch(url)
.then((response.json()))
.then((responseJson) => this.setState({isLoading: false}));

然后在渲染方法中，如下所示：

if (this.state.isLoading){
   return this.myLoadingView();
} else {
   return this.myViewWithCompletedData() 
}

提取完成后，状态将更新，RN 将足够智能以重新呈现您的视图。