React-Redux：应用程序卡住直到触摸交互答案

【问题标题】：React-Redux: App gets stuck until Touch InteractionReact-Redux：应用程序卡住直到触摸交互
【发布时间】：2017-12-02 09:01:47
【问题描述】：

在我的 React-Native 应用程序（在 iOS 上）中，我使用 Redux 和 Redux-Thunk 来管理 API 请求的状态。当我最初像这样加载我的数据时：

  componentDidMount() {
    this.props.fetchFirstData();
  }

应用卡住了。在我看到的日志中，请求挂起的操作被分派，但之后没有任何反应。只有在我在屏幕上进行 any 触摸交互之后，才会调度请求成功操作并且一切正常。作为一种解决方法，我调用这样的函数，它可以按预期工作：

  render() {
    if (this.props.requests.length === 0) {
      this.props.fetchFirstData();
    }

但我想找出问题所在。我的actions.js 看起来像这样，但我不认为这里有错误。

function foiRequestsError(error) {
  return {
    type: 'FOI_REQUESTS_ERROR',
    error,
  };
}

function foiRequestsPending() {
  return {
    type: 'FOI_REQUESTS_PENDING',
  };
}

function foiRequestsSuccess(requests) {
  return {
    type: 'FOI_REQUESTS_SUCCESS',
    requests,
  };
}

function foiRequestsFetchData(url) {
  return dispatch => {
    dispatch(foiRequestsPending());

    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw Error(response.status);
        }
        return response;
      })
      .then(response => response.json())
      .then(requests => dispatch(foiRequestsSuccess(requests)))
      .catch(error => dispatch(foiRequestsError(error.message)));
  };
}

const ORIGIN = 'XXX';

function foiRequestsFetchFirstData() {
  return foiRequestsFetchData(`${ORIGIN}/XXX`);
}

function foiRequestsFetchMoreData(nextUrl) {
  return foiRequestsFetchData(`${ORIGIN}${nextUrl}`);
}

export { foiRequestsFetchFirstData, foiRequestsFetchMoreData };

【问题讨论】：

标签： react-native redux react-redux redux-thunk react-native-ios

【解决方案1】：

原来远程调试有问题：https://github.com/facebook/react-native/issues/6679，setTimeout 修复了：

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw Error(response.status);
    }
    setTimeout(() => null, 0); // workaround for issue-6679
    return response;
  })

【讨论】：