React dangerouslySetInnerHTML 错误导致 Redux 中的 promise 被拒绝答案

【问题标题】：React dangerouslySetInnerHTML error causing promise rejection in ReduxReact dangerouslySetInnerHTML 错误导致 Redux 中的 promise 被拒绝
【发布时间】：2017-05-24 05:53:23
【问题描述】：

我设置了一个 React 组件来显示来自 CMS 的内容，我使用 dangerouslySetInnerHTML。我有一个标准的获取、请求、接收模式，设置了一个 thunk 来处理异步操作。

动作创建者如下所示：

export const fetchPage = (slug) => {
  return (dispatch) => {
    dispatch(requestPage());
    return fetch(`${config.api}/pages/?slug=${slug}`)
      .then((response) => {
        const status = response.status;
        switch (status) {
          case 200:
            return response.json();
          case 401:
            return Promise.reject(status);
          default:
            return Promise.reject(status);
        }
      })
      .then(json =>
        dispatch(receivePage({
          slug,
          json,
        }))
      ).catch(err =>
        dispatch(receivePageError(err)));
  };
};

当我第一次创建 React 组件时，我忘记将 { __html: content } 格式的对象传递给 dangerouslySetInnerHTML，而只是将它传递给 content，这给了我不变量违规。让我感到困惑的是，这个错误冒泡到了 redux 异步流中并导致了 receivePageError 的调度。为什么这个错误会出现在这里，而不是 React 组件本身？

【问题讨论】：

标签： javascript reactjs redux es6-promise

【解决方案1】：

错误已被 Promise 的 catch 捕获。代码示例将控制台记录异常。

const callAnError = () => {
  throw Error('Error');
}

const callAnErrorParent = () => {
  callAnError();
}

const callAnErrorGrandparent = () => {
  callAnErrorParent();
};

Promise.resolve().then(() => {
   callAnErrorGrandparent();
}).catch((error) => {
  console.log(error);
});

https://jsfiddle.net/nfyeu5co/1/

这是理解承诺的绝佳资源

https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md

【讨论】：

嗨，马特，如问题所示，原始发帖人已经知道什么是承诺以及拒绝承诺的含义。请不要在没有提供实际解决方案的情况下回答问题。
原发帖人问“为什么这个错误出现在这里，而不是在 React 组件本身？”这回答了。这个问题需要什么“实际解决方案”？
啊，“redux 异步流”有点抱歉