Uncaught TypeError: Не удается прочитать свойство 'touched' of undefined

Question

Я продолжаю получать эту Неизвестную ошибку TypeError при попытке проверить мою форму в React с помощью Redux, и я не могу найти решение для нее. Ошибка исходит от EventForm здесь:

<div className={`form-group ${title.touched && title.invalid ? 'has-error' : ''}`}> 

И появляется в комплекте bundles.js.

Похоже, что «поля» по какой-то причине не определяются. Я не могу понять, почему.

Это моя форма компонент:

// src/components/Form.js 
import React, { Component, PropTypes } from 'react' 
import style from './style.css' 
import { ControlLabel, FormControl, PageHeader, Grid, Checkbox, Radio, FormGroup, Button, HelpBlock, InputGroup } from 'react-bootstrap' 
import DatePicker from 'react-bootstrap-date-picker'; 
import FieldGroup from './FieldGroup' 
import { reduxForm } from 'redux-form'; 

function validate(values) { 
    const errors = {}; 

    if (!values.title || values.title.trim() === '') { 
    errors.title = 'Enter a Title'; 
    } 
    if (!values.categories || values.categories.trim() === '') { 
    errors.categories = 'Enter categories'; 
    } 
    if (!values.content || values.content.trim() === '') { 
    errors.content = 'Enter some content'; 
    } 

    return errors; 
} 


class EventForm extends Component { 

    getInitalState() { 
    var value = new Date().toISOString(); 
    return { 
     value: value 
    } 
    } 

    handleChange({value}) { 
    this.setState({ 
     value: value 
    }); 
    } 

    dateGroup() { 
    return (
     <FormGroup> 
     <ControlLabel>Label</ControlLabel> 
     <DatePicker value={this.state.value} onChange={this.handleChange} /> 
     </FormGroup> 
    ); 
    } 

    render() { 
    const { fields: { title, categories, content }, handleSubmit, submitting } = this.props; 

    return (
     <div className="container"> 
     <form onSubmit={() => this.handleSubmit}> 
     <div className={`form-group ${title.touched && title.invalid ? 'has-error' : ''}`}> 
      <label className="control-label">Title*</label> 
      <input type="text" className="form-control" {...title} /> 
      <div className="help-block"> 
      {title.touched ? title.error : ''} 
      </div> 
      <div className="help-block"> 
      </div> 
     </div> 

     <div className={`form-group ${categories.touched && categories.invalid ? 'has-error' : ''}`}> 
      <label className="control-label">Categories*</label> 
      <input type="text" className="form-control" {...categories} /> 
      <div className="help-block"> 
      {categories.touched ? categories.error : ''} 
      </div> 
     </div> 

     <div className={`form-group ${content.touched && content.invalid ? 'has-error' : ''}`}> 
      <label className="control-label">Content*</label> 
      <textarea className="form-control" {...content} /> 
      <div className="help-block"> 
      {content.touched ? content.error : ''} 
      </div> 
     </div> 

     <button type="submit" className="btn btn-primary" >Submit</button> 
     <Link to="/" className="btn btn-error">Cancel</Link> 
     </form> 
     </div> 
); 
    } 
} 

export default reduxForm({ 
    form: 'PostsEventForm', 
    fields: ['title', 'categories', 'content'], 
    validate 
},)(EventForm); 

Вот мой редуктор:

import { combineReducers } from 'redux'; 
import { reducer as formReducer } from 'redux-form'; 
//combineReducers adds all reducers into a single JSON of reducers 
const rootReducer = combineReducers({ 
form: formReducer // ← redux-form 
}); 
export default rootReducer; 

И мой index.js:

import { Router, Route, browserHistory } from 'react-router' 
import { syncHistoryWithStore } from 'react-router-redux' 
import { Provider } from 'react-redux' 
import ReactDOM from 'react-dom' 
import React from 'react' 
import RegisteredEventOverview from './components/RegisteredEventOverview' 
import bootstrap from 'bootstrap/dist/css/bootstrap.css' 
import EventForm from './components/EventForm/EventForm' 
import configureStore from './store/configureStore.js'; 

const store = configureStore(); 

ReactDOM.render(
    <Provider store={store}> 
    <EventForm/> 
    </Provider> 
    ,document.getElementById('root') 
); 

Это мой package.json:

{ 
    "name": "take-me-out", 
    "version": "1.0.0", 
    "private": true, 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3002", 
    "build": "NODE_ENV=production webpack --progress --colors" 
    }, 
    "license": "MIT", 
    "devDependencies": { 
    "babel-core": "^6.5.2", 
    "babel-loader": "^6.2.3", 
    "babel-plugin-transform-runtime": "^6.5.2", 
    "babel-preset-es2015": "^6.5.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "babel-runtime": "^6.5.0", 
    "classnames": "^2.2.3", 
    "css-loader": "^0.23.1", 
    "file-loader": "^0.8.5", 
    "jquery": "^3.1.0", 
    "less": "^2.7.1", 
    "less-loader": "^2.2.3", 
    "postcss-loader": "^0.8.1", 
    "react": "^15.3.2", 
    "react-bootstrap": "^0.30.3", 
    "react-dom": "^15.3.2", 
    "react-hot-loader": "^3.0.0-beta.5", 
    "react-redux": "^4.4.0", 
    "react-revalidator": "^0.1.1", 
    "react-router": "^2.0.0", 
    "react-router-redux": "^4.0.0", 
    "redux": "^3.3.1", 
    "redux-actions": "^0.9.1", 
    "redux-form": "^6.1.0", 
    "redux-revalidate": "^0.1.0", 
    "revalidate": "^0.4.1", 
    "rucksack-css": "^0.8.5", 
    "style-loader": "^0.13.0", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-hot-middleware": "^2.7.1" 
    }, 
    "peerDependencies": { 
    "revalidate": "<1.0.0", 
    "react": "^0.14.0 || ^15.0.0" 
    }, 
    "dependencies": { 
    "bootstrap": "^3.3.7", 
    "redux-promise": "^0.5.3" 
    } 
} 

Answer 1

Вы не можете использовать непосредственно

<input type="text" className="form-control" {...title} /> 

Вы должны импортировать перевождь-формы Поля

import { Field, reduxForm } from 'redux-form' 

И использовать их в форме, передавая в качестве компонента подпирать свои входы:

<Field name="title" component="input" type="text" placeholder="title"/> 

Таким образом, Redux-Form передает некоторые опоры на поле ('коснулся' в вашем c аза, который используется, чтобы знать, если пользователь «прикоснулся», что ввод)

Вы можете найти хороший пример на официальный Redux-Form page