javascript - 无法读取空 URL : webpack:///./~react-dom/lib/DOMLazyTree.js 的属性 'replaceChild'

Question

我正在使用phonegap创建一个应用程序，使用react v15和"webpack": "^2.2.1"来捆绑所有内容。然后，我运行 webpack.prod.json 来生成一个独立的 .js 文件，该文件包含在应用程序中。

当我在本地安装应用程序时，没有任何问题并且可以运行该应用程序，但是当我通过phonegap.com/build 构建时，就会出现问题。

更奇怪的是初始状态加载良好。当我导航到 #/home 时，会发生此错误:

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at RequireLogin.render (RequireLogin.js:32)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:799)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)

RequireLogin.js

import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router'

class BlockForLoggedInUsers extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    const loggedIn = this.props.user.loggedIn || JSON.parse(localStorage.LOGGED_IN);
    if (loggedIn) {
      return (
        <Redirect push to="/home"/>
      )
    }else{
      return (
        <div></div>
      );
    }
  }
}


function mapStateToProps(state){
  return {
    user: state.user
  };
}

export default connect(mapStateToProps)(BlockForLoggedInUsers);

然后，当我按后退键时，我收到一个不同的错误:

DOMLazyTree.js:69 Uncaught TypeError: Cannot read property 'replaceChild' of null
    at Function.replaceChildWithTree (DOMLazyTree.js:69)
    at Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup] (Danger.js:41)
    at ReactCompositeComponentWrapper._replaceNodeWithMarkup (ReactCompositeComponent.js:784)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:774)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547)
    at Object.receiveComponent (ReactReconciler.js:125)
    at Object.updateChildren (ReactChildReconciler.js:109)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:213)

我遇到的问题是，这意味着应用程序加载良好，但我假设我的 #/home 组件中的某些内容已损坏，但我已将其剥离，只剩下一个分区。

所有值得注意的软件包:

"history": "^4.5.1",
"react": "^15.5.0",
"react-css-modules": "^4.1.0",
"react-dom": "^15.5.0",
"react-redux": "^5.0.3",
"react-router": "^4.1.1",
"react-router-dom": "^4.0.0",
"react-router-redux": "^5.0.0-alpha.6",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.6.0",
"webpack": "^2.2.1"

Router.js

export default class Routes extends Component {
  render() {
    return (
      <div>
        <Route exact path="/" component={Splash}/>

        <Route path="/signin" component={SignIn} />
        <Route path="/logout" component={Logout} />

        <Route path="/home" component={Home}  />
        <Route path="/settings" component={Settings} />

        <Route path="/sextypeselection" component={SexTypeSelection} />
        <Route path="/desire" component={Desire} />
      </div>
    )
  }
};

home/index.js

import React from 'react';
import { bindActionCreators } from 'redux'
import { RequireLogin } from '../shared/auth/userRedirects'
import mobiscroll from '../shared/mobiscroll/mobiscroll.custom';
import * as currentSexInfo from '../../actions/currentSexInfo'
import {connect} from 'react-redux';

//Header
import Header from '../shared/header/Header';
import RightPlus from '../shared/header/RightPlus';
import Menu from '../shared/menu';

//Styles
import HomeStyle from './home.css';

class Home extends React.Component {
  constructor (props){
    super(props);
    console.info(props);
    const now = new Date();
    this.state = {
      settings : {
        display: 'inline',
        yearChange: false,
        marked: [
          new Date(2017, 5, 4)
        ]
        , max: new Date()
        // , showOuterDays: false
      }
    };
    this.selectData = this.selectData.bind(this);
  }

  selectData = (event, inst) => {
    if(event.control) {
      this.props.DispatchChangeCurrentSexInfo(event.date);
      window.location.hash = 'sextypeselection';
    }
  };

  onPosition = (ev) => {
    let $ = mobiscroll.$,
      monthCont = $('.mbsc-cal-anim-c', ev.target),
      calHeight = document.body.offsetHeight - 375;
    monthCont.height('');
    monthCont.height(calHeight);
  };

  render(){
    return (
      <div>
        <RequireLogin />
        <Header right={<RightPlus link="sextypeselection" />} />
        <div className={HomeStyle.home}>
          <div className="pageInfo">
            <h1>My calender</h1>
            <p>Select a date to view <br/> input your information</p>
          </div>
          <div className={"cal " + HomeStyle.calenderContainer}>
            <mobiscroll.Calendar onPosition={this.onPosition} onSetDate={this.selectData} options={this.state.settings} {...this.props} />
          </div>
        </div>
        <Menu />
      </div>
    );
  }
}

function matchDispatchToProps(dispatch){
  return {DispatchChangeCurrentSexInfo : bindActionCreators(currentSexInfo.changeCurrentSexInfo, dispatch)}
}

export default connect(null,matchDispatchToProps)(Home);

Answer 1

遗憾的是，最终很简单，我怀疑任何人都会遇到同样的问题，但最终是 JSON.parse 试图处理 undefined 项。

修复:

const storage = localStorage.LOGGED_IN || {};
const loggedIn = this.props.user.loggedIn || JSON.parse(JSON.stringify(storage));