危险地反应SetInnerHTML错误导致Redux中的承诺被拒绝

Question

I have a React component set up to display content from a CMS, where I use dangerouslySetInnerHTML . I have a standard fetch, request, receive pattern set up with a thunk to handle the async action.

The action creator looks like this:

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)));
  };
};

When I first created the React component, I forgot to pass to dangerouslySetInnerHTML the object in format { __html: content } and just passed it content , giving me the invariant violation. What confuses me is that this error bubbled up into the redux async flow and caused a dispatch of receivePageError. Why did this error show up here, rather than in the React component itself?

Answer 1

The error has been caught by the Promise's catch. The code example will console log the exception.

 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/

This is great resource for understanding promises

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