Question

我理解错误是因为我正在尝试将元素呈现给尚未加载的DOM，我已经检查了stackoverflow上的多个问题，但我似乎无法弄清楚我的问题所在。在Webpack-dev-server中，我的代码运行完美，没有问题。现在我正在运行带有nodejs的server.js，我收到了这个错误。

以下是html，bundle.js和app.js文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Login System</title>
    <link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

// bundle.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

// app.js

import React, { Component } from 'react'
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
import LoginPage from './login'

const NotFound = () => (<h1>404.. This page is not found!</h1>)

var App = React.createClass({
  render() {
    return (
      <Router history={hashHistory}>
        <Route path='/' component={LoginPage} />
        <Route path='/verify/:token' component={EmailValidation} />
        <Route path='*' component={NotFound} />
      </Router>
    )
  }
});

var EmailValidation = React.createClass({
  getInitialState: function(){
    return {
      verifyResponse: null,
      valid: false,
      displayResult: "Uh-oh something went wrong."
    };
  },

  setResponse : function(e){
    this.setState({
        verifyResponse: e
    });
    switch(this.state.verifyResponse){
      case 'found':
        console.log("response rcvd, valid is true");
        this.setState({
          valid: true,
          displayResult: "Your email has been verified."
        });
        break;
      case 'negative':
        this.setState({
          valid: false
        });
      break;
    }
  },

  componentDidMount : function(){
    var token = this.props.params.token;
      let fetchData = {
        method: "post",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },

        body: JSON.stringify({
          username: null,
          token: this.props.params.token,
          message: null
        })
      }

      var fromServer = fetch('http://MyIpAddress/verify', fetchData)
      .then(response => response.json())
      .then(response => {
        this.setResponse(response.message);
    })
    .catch(error => console.log("there was an error --> " + error));

  },


  render() {
    return (
      <div>
        <p> {this.state.displayResult} </p>
      </div>
    )
  }
});



export default App

错误：_registerComponent（...）：目标容器不是DOM元素

0 个答案: