我正在处理样板React + Redux + Electron项目。当我添加大量组件并在UI上工作时，Devtools工作正常，但现在它无法加载，并且每次尝试加载时，控制台中都会出现错误，最初告诉我存在Uncaught Type Error（＃ 1），第二个是来自React Devtools的警告。
Error#1
Uncaught TypeError: Cannot read property 'displayName' of null
at getDisplayName (backend.js:9159)
at getDataFiber (backend.js:9888)
at enqueueMount (backend.js:10158)
at mountFiber (backend.js:10246)
at backend.js:10306
at Set.forEach (<anonymous>)
at Object.walkTree (backend.js:10304)
at backend.js:8534
at <anonymous>:52:32
at Array.map (<anonymous>)
getDisplayName @ backend.js:9159
getDataFiber @ backend.js:9888
enqueueMount @ backend.js:10158
mountFiber @ backend.js:10246
(anonymous) @ backend.js:10306
walkTree @ backend.js:10304
(anonymous) @ backend.js:8534
(anonymous) @ VM117:52
emit @ VM117:51
setupBackend @ backend.js:8621
module.exports @ backend.js:8567
(anonymous) @ backend.js:116
g @ backend.js:981
EventEmitter.emit @ backend.js:894
(anonymous) @ backend.js:302
(anonymous) @ backend.js:7619
(anonymous) @ backend.js:7618
_handleMessage @ backend.js:7611
listener @ backend.js:92
postMessage (async)
handleMessageFromDevtools @ VM131 contentScript.js:20
emit @ /Users/.../.../Pro…ensions/event.js:19
Port.ipcRenderer.on @ /Users/.../.../Pro…er/chrome-api.js:37
emitTwo @ events.js:126
emit @ events.js:214
这是在第一个错误之后加载的第二个错误。
Error #2
Warning: React DevTools encountered an error: TypeError: Cannot read property 'displayName' of null
warningWithoutStack @ react-dom.development.js:506
(anonymous) @ react-dom.development.js:9577
onCommitRoot @ react-dom.development.js:9625
commitRoot @ react-dom.development.js:17493
completeRoot @ react-dom.development.js:18912
performWorkOnRoot @ react-dom.development.js:18841
performWork @ react-dom.development.js:18749
performSyncWork @ react-dom.development.js:18723
requestWork @ react-dom.development.js:18592
scheduleWork @ react-dom.development.js:18401
enqueueSetState @ react-dom.development.js:12313
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:372
setTimeout @ prices.jsx:51
setTimeout (async)
networkRequest @ prices.jsx:49
networkRequest @ react-hot-loader.development.js:587
componentDidMount @ prices.jsx:58
componentDidMount @ react-hot-loader.development.js:577
commitLifeCycles @ react-dom.development.js:15961
commitAllLifeCycles @ react-dom.development.js:17262
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17458
completeRoot @ react-dom.development.js:18912
performWorkOnRoot @ react-dom.development.js:18841
performWork @ react-dom.development.js:18749
performSyncWork @ react-dom.development.js:18723
requestWork @ react-dom.development.js:18592
scheduleWork @ react-dom.development.js:18401
scheduleRootUpdate @ react-dom.development.js:19069
updateContainerAtExpirationTime @ react-dom.development.js:19097
updateContainer @ react-dom.development.js:19154
module.exports../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:19416
(anonymous) @ react-dom.development.js:19556
unbatchedUpdates @ react-dom.development.js:18952
legacyRenderSubtreeIntoContainer @ react-dom.development.js:19552
render @ react-dom.development.js:19613
(anonymous) @ index.js:10
./app/index.js @ renderer.dev.js:3492
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
0 @ fetch.js:516
__webpack_require__ @ bootstrap:724
module.exports../app/Routes.js.Object.defineProperty.value @ bootstrap:791
(anonymous) @ bootstrap:791
相关文件中的代码。
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import routes from '../../constants/routes';
const axios = require('axios');
let binance_api = require('../../config/cxns');
let UserInfo = require("../../config/UserInfo.js");
export const GlobalContext = React.createContext()
export const Consumer = GlobalContext.Consumer
const Provider = GlobalContext.Provider
var AccountBallance = function(ticker, value_in){
this.ticker = ticker;
this.value_in = value_in;
}
export default class GlobalInfo extends React.Component{
constructor(props){
super(props);
this.state = {
userInfo:'',
loading: true,
data: {
accountInfo:'',
binance:{
balance_gtz:[],
subtotal:''
}
}
}
}
networkRequest(){
// Remove setTimeout and replace with a networkRequest
// setInterval(() =>{
//
// }, 10000)
axios.get(("https://api.nomics.com/v1/exchange-markets/prices?key=")+UserInfo.UserInfo.Nomics.key+"¤cy=BTC&exchange=binance")
.then((response, error) => {
console.log('res: ', response.data)
})
setTimeout(() => {
this.getInfo()
this.setState({
loading: false
})
}, 3000)
}
componentDidMount(){
this.networkRequest()
}
getInfo = () => {
binance_api.cxns.Binance2.accountInfo()
.then((res) => {
this.setState({data:{
...this.state.data,
binance:{
...this.state.data.binance,
accountInfo:res}
}});
})
.then(async (error) => {
binance_api.cxns.binance.balance((error, balances) => {
if ( error ) return console.error(error);
var gtz=[];
for (var x in balances){
if (balances[x].available > 0){
gtz[x] = parseFloat(balances[x].available) + parseFloat(balances[x].onOrder);
}
}
this.setState(
{data:{
...this.state.data,
binance:{
...this.state.data.binance,
balance_gtz:gtz}
}});
});
})
}
render() {
return (
<Provider value={this.state.data} >
{this.state.loading ? "Loading..." : this.props.children}
</Provider>
)
}
}