TypeError:无法读取React Chrome Extension上未定义的属性"错误"

Question

我正在使用React-Chrome-Redux库开发React Chrome扩展程序

这是我第一次使用这个,我陷入了一个错误,我无法弄清楚原因.

我的弹出应用程序在运行时失败,并在控制台上显示以下错误消息:

(未知)事件处理程序出错:TypeError:无法读取未定义的属性"错误"

我尝试调试并在错误的确切位置设置断点:

return new Promise(function (resolve, reject) {
    chrome.runtime.sendMessage({
      type: _constants.DISPATCH_TYPE,
      payload: data
    }, function (_ref2) {
      var error = _ref2.error;
      var value = _ref2.value;

      if (error) {
        reject((0, _assignIn2.default)(new Error(), error));
      } else {
        resolve(value.payload);
      }
    });
  });
}

在Promise回调中,当动作为:type:"chromex.dispatch"时,_ref2未​​定义,并且有效负载也未定义.

这是在引入调度方法启动认证过程后开始发生的,代码如下:

class App extends Component {

  constructor(props) {
    super(props);

    this.props.dispatch({
      type: START_AUTH
    });
  }

在popup/index.js和background/index.js上我设置了商店通信渠道:

//popup
import {Store} from 'react-chrome-redux';
import {Provider} from 'react-redux';


const proxyStore = new Store({
  portName: 'my_app'
});

//background
import rootReducer from '../core/reducers';

import {wrapStore} from 'react-chrome-redux';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'react-chrome-redux';

import App from './components/App';

const store = createStore(rootReducer, {});

wrapStore(store, {
  portName: 'my_app'
});

我在身份验证过程中有很多日志消息,但似乎没有任何事情发生.

在核心/我有常见的文件,如reducer,动作类型,动作等,它总是从web6-babel的ES6翻译.

不幸的是,似乎React dev工具无法在Chrome扩展程序上运行以帮助调试.

您需要的任何想法或更多信息,以帮助我弄清楚发生了什么以及如何解决它？

Answer 1

这适用于任何偶然发现在这里寻找答案的人.@danielfranca发布的只是症状.

实际发生的是,在调度操作后抛出错误(在后台页面中),因此操作无法完成.请参阅wrapStore.js或更低版本(如果他们的github发生了变化).

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === DISPATCH_TYPE) {
    const action = Object.assign({}, request.payload, {
      _sender: sender
    });

    dispatchResponder(store.dispatch(action), sendResponse);
    return true;
  }
});

下面的这一行store.dispatch(action)返回一个结果.但是如果在此期间发生错误(在reducer中),那么就不会得到结果.

dispatchResponder(store.dispatch(action), sendResponse);

所以它什么都没发回(未定义)(参见这里).在Store.js中,dispatch函数尝试从中检索error密钥undefined,从而导致错误.

因为您正在检查弹出/内容页面,所以会收到这个非常模糊的错误消息.如果您检查背景页面,您将看到实际错误.

我创建了一个PR来显示更有用的错误消息.希望它会合并.

Answer 2

解决方案比我预期的要简单得多.

动作名称未被导出,因此实际调度的类型 undefined

改变自:

const START_AUTH = "START_AUTH";

至:

export const START_AUTH = "START_AUTH";

解决了这个问题.