无法读取属性'；parentNode'；ReactJS Redux表单中未定义错误的类型_Reactjs_Redux_React Redux_Redux Form

无法读取属性'；parentNode'；ReactJS Redux表单中未定义错误的类型

reactjs redux

无法读取属性'；parentNode'；ReactJS Redux表单中未定义错误的类型,reactjs,redux,react-redux,redux-form,Reactjs,Redux,React Redux,Redux Form,基本上，我想在react中使用redux实现注册或注册表单。但我在运行应用程序时在浏览器控制台中遇到错误： Cannot read property 'parentNode' of undefined at Object.r (bundle.js:61207) at t (bundle.js:61183) at Object.<anonymous> (bundle.js:61207) at t (bundle.js:61183) at o (bund

基本上，我想在react中使用redux实现注册或注册表单。但我在运行应用程序时在浏览器控制台中遇到错误：

Cannot read property 'parentNode' of undefined  at Object.r (bundle.js:61207)
    at t (bundle.js:61183)
    at Object.<anonymous> (bundle.js:61207)
    at t (bundle.js:61183)
    at o (bundle.js:61183)
    at bundle.js:61183
    at n (bundle.js:61183)
    at Object.defineProperty.value (bundle.js:61183)
    at __webpack_require__ (bundle.js:679)
    at fn (bundle.js:89)

这是FieldLevelValidationForm.js文件：

import React from 'react';
import { Field, reduxForm } from 'redux-form';  
const required = value => (value ? undefined : 'Required')
const maxLength = max => value =>
  value && value.length > max ? `Must be ${max} characters or less` : undefined
const maxLength15 = maxLength(15)
export const minLength = min => value =>
  value && value.length < min ? `Must be ${min} characters or more` : undefined
export const minLength2 = minLength(2)
const number = value =>
  value && isNaN(Number(value)) ? 'Must be a number' : undefined
const minValue = min => value =>
  value && value < min ? `Must be at least ${min}` : undefined
const minValue18 = minValue(18)
const email = value =>
  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
    ? 'Invalid email address'
    : undefined
const tooOld = value =>
  value && value > 65 ? 'You might be too old for this' : undefined
const aol = value =>
  value && /.+@aol\.com/.test(value)
    ? 'Really? You still use AOL for your email?'
    : undefined
const alphaNumeric = value =>
  value && /[^a-zA-Z0-9 ]/i.test(value)
    ? 'Only alphanumeric characters'
    : undefined
export const phoneNumber = value =>
  value && !/^(0|[1-9][0-9]{9})$/i.test(value)
    ? 'Invalid phone number, must be 10 digits'
    : undefined 
const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
) 
const FieldLevelValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
        validate={[required, maxLength15, minLength2]}
        warn={alphaNumeric}
      />
      <Field
        name="email"
        type="email"
        component={renderField}
        label="Email"
        validate={email}
        warn={aol}
      />
      <Field
        name="age"
        type="number"
        component={renderField}
        label="Age"
        validate={[required, number, minValue18]}
        warn={tooOld}
      />
      <Field
        name="phone"
        type="number"
        component={renderField}
        label="Phone number"
        validate={[required, phoneNumber]}
      />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'fieldLevelValidation' // a unique identifier for this form
})(FieldLevelValidationForm)

index.html：

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Events Across</title>
        <!-- Bootstrap -->
        <link href="./assets/css/bootstrap.min.css" rel="stylesheet"></link>
      </head>
      <body>
        <div id="app"></div>
        <script src="/app/bundle.js"></script>
      </body>
    </html>


跨越

index.js：

import React, {Component} from "react";
import {render} from "react-dom";
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {createStore} from 'redux';

import {Home} from "./components/Home/Home";
import {SignIn} from "./components/SignIn/SignIn";
import {SignUp} from "./components/SignUp/SignUp";
import {GuestHeader} from "./components/GuestHeader";
import {CreateEvent} from "./components/CreateEvent/CreateEvent";


export class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <div>
           <nav className="navbar navbar-inverse">
             <div className="container-fluid">
               <div className="navbar-header">
                 <Link to="/" className="navbar-brand">Events Across</Link>
               </div>
               <ul className="nav navbar-nav">
                 <li><a href="/CreateEvent">Create an Event</a></li>
                 <li><a href="#">We are Hiring</a></li>
                 <li><a href="#">Blog</a></li>
               </ul>
               <ul className="nav navbar-nav navbar-right">
                 <li><Link to="/SignUp"><span className="glyphicon glyphicon-user"></span> Sign Up</Link></li>
                 <li><Link to="/SignIn"><span className="glyphicon glyphicon-log-in"></span> Sign In</Link></li>
               </ul>
             </div>
           </nav>
          </div>
          <Route exact path="/" component={Home} />
          <Route path={"/SignUp"} component={SignUp} />
          <Route path={"/SignIn"} component={SignIn} />
          <Route path={"/CreateEvent"} component={CreateEvent} />
        </div>
      </Router>
    );
  }
}

render(
  <App />,
  window.document.getElementById("app")
);

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“redux”导入{createStore}；
从“/components/Home/Home”导入{Home}”；
从“/components/SignIn/SignIn”导入{SignIn}”；
从“/components/SignUp/SignUp”导入{SignUp}”；
从“/components/GuestHeader”导入{GuestHeader}”；
从“/components/CreateEvent/CreateEvent”导入{CreateEvent}；
导出类应用程序扩展React.Component{
render（）{
返回(
跨越






报名
登录

);
}
}
渲染(
,
window.document.getElementById（“应用程序”）
);

这是我注册表格的完整代码。我用的是Redux表单。但我得到的错误是“无法读取未定义的属性'parentNode'

删除此行：

import { Values } from "redux-form-website-template";

你能出示你的index.html文件吗？我已经更新了这个问题。请检查。我建议您使用webpack中的sourcemaps来查看实际发生的错误，而不是在捆绑包中。

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Events Across</title>
        <!-- Bootstrap -->
        <link href="./assets/css/bootstrap.min.css" rel="stylesheet"></link>
      </head>
      <body>
        <div id="app"></div>
        <script src="/app/bundle.js"></script>
      </body>
    </html>

import React, {Component} from "react";
import {render} from "react-dom";
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {createStore} from 'redux';

import {Home} from "./components/Home/Home";
import {SignIn} from "./components/SignIn/SignIn";
import {SignUp} from "./components/SignUp/SignUp";
import {GuestHeader} from "./components/GuestHeader";
import {CreateEvent} from "./components/CreateEvent/CreateEvent";


export class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <div>
           <nav className="navbar navbar-inverse">
             <div className="container-fluid">
               <div className="navbar-header">
                 <Link to="/" className="navbar-brand">Events Across</Link>
               </div>
               <ul className="nav navbar-nav">
                 <li><a href="/CreateEvent">Create an Event</a></li>
                 <li><a href="#">We are Hiring</a></li>
                 <li><a href="#">Blog</a></li>
               </ul>
               <ul className="nav navbar-nav navbar-right">
                 <li><Link to="/SignUp"><span className="glyphicon glyphicon-user"></span> Sign Up</Link></li>
                 <li><Link to="/SignIn"><span className="glyphicon glyphicon-log-in"></span> Sign In</Link></li>
               </ul>
             </div>
           </nav>
          </div>
          <Route exact path="/" component={Home} />
          <Route path={"/SignUp"} component={SignUp} />
          <Route path={"/SignIn"} component={SignIn} />
          <Route path={"/CreateEvent"} component={CreateEvent} />
        </div>
      </Router>
    );
  }
}

render(
  <App />,
  window.document.getElementById("app")
);

import { Values } from "redux-form-website-template";