erikras / erikras/react-redux-universal-hot-example
fieldArray doesn't work
- Dominant language
- JavaScript
- Stars
- 12.1k
- Forks
- 2.5k
- PR merge metrics
- No merged PRs in 30d
Description
1. reference: https://react-redux.herokuapp.com/survey
I want to add "phones" in FieldArray.
2. error message:
warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `SurveyForm`.warning @ warning.js:45createElement @ ReactElementValidator.js:221render @ SurveyForm.js:116_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:587_renderValidatedComponent @ ReactCompositeComponent.js:607ReactCompositeComponent__renderValidatedComponent @ ReactPerf.js:66mountComponent @ ReactCompositeComponent.js:220ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37mountChildren @ ReactMultiChild.js:241_createContentMarkup @ ReactDOMComponent.js:591mountComponent @ ReactDOMComponent.js:479mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66mountComponent @ ReactReconciler.js:37_mountChildByNameAtIndex @ ReactMultiChild.js:474_updateChildren @ ReactMultiChild.js:378updateChildren @ ReactMultiChild.js:326_updateDOMChildren @ ReactDOMComponent.js:871updateComponent @ ReactDOMComponent.js:700receiveComponent @ ReactDOMComponent.js:645receiveComponent @ ReactReconciler.js:87updateChildren @ ReactChildReconciler.js:84_reconcilerUpdateChildren @ ReactMultiChild.js:216_updateChildren @ ReactMultiChild.js:351updateChildren @ ReactMultiChild.js:326_updateDOMChildren @ ReactDOMComponent.js:871updateComponent @ ReactDOMComponent.js:700receiveComponent @ ReactDOMComponent.js:645receiveComponent @ ReactReconciler.js:87_updateRenderedComponent @ ReactCompositeComponent.js:562_performComponentUpdate @ ReactCompositeComponent.js:544updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66receiveComponent @ ReactCompositeComponent.js:405receiveComponent @ ReactReconciler.js:87_updateRenderedComponent @ ReactCompositeComponent.js:562_performComponentUpdate @ ReactCompositeComponent.js:544updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66receiveComponent @ ReactCompositeComponent.js:405receiveComponent @ ReactReconciler.js:87_updateRenderedComponent @ ReactCompositeComponent.js:562_performComponentUpdate @ ReactCompositeComponent.js:544updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66receiveComponent @ ReactCompositeComponent.js:405receiveComponent @ ReactReconciler.js:87_updateRenderedComponent @ ReactCompositeComponent.js:562_performComponentUpdate @ ReactCompositeComponent.js:544updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66receiveComponent @ ReactCompositeComponent.js:405receiveComponent @ ReactReconciler.js:87_updateRenderedComponent @ ReactCompositeComponent.js:562_performComponentUpdate @ ReactCompositeComponent.js:544updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66performUpdateIfNecessary @ ReactCompositeComponent.js:421performUpdateIfNecessary @ ReactReconciler.js:102runBatchedUpdates @ ReactUpdates.js:129perform @ Transaction.js:136perform @ Transaction.js:136perform @ ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates.js:147ReactUpdates_flushBatchedUpdates @ ReactPerf.js:66closeAll @ Transaction.js:202perform @ Transaction.js:149batchedUpdates @ ReactDefaultBatchingStrategy.js:62enqueueUpdate @ ReactUpdates.js:176enqueueUpdate @ ReactUpdateQueue.js:24enqueueSetState @ ReactUpdateQueue.js:190ReactComponent.setState @ ReactComponent.js:65(anonymous function) @ ReduxAsyncConnect.js:213
invariant.js:39 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `SurveyForm`.(…)
3. My code for SurveyForm.js:
import React, {Component, PropTypes} from 'react';
import {Field, FieldArray, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import surveyValidation from './surveyValidation';
import \* as surveyActions from 'redux/modules/survey';
function asyncValidate(data, dispatch, {isValidEmail}) {
if (!data.email) {
return Promise.resolve({});
}
return isValidEmail(data);
}
@connect(() => ({}),
dispatch => bindActionCreators(surveyActions, dispatch)
)
@reduxForm({
form: 'survey',
fields: ['name', 'email', 'occupation', 'currentlyEmployed', 'sex', 'member'],
fieldArray: ['members'],
validate: surveyValidation,
asyncValidate,
asyncBlurFields: ['email']
})
export default
class SurveyForm extends Component {
static propTypes = {
active: PropTypes.string,
asyncValidating: PropTypes.bool.isRequired,
fields: PropTypes.object.isRequired,
fieldArray: PropTypes.array,
dirty: PropTypes.bool.isRequired,
handleSubmit: PropTypes.func.isRequired,
resetForm: PropTypes.func.isRequired,
invalid: PropTypes.bool.isRequired,
pristine: PropTypes.bool.isRequired,
valid: PropTypes.bool.isRequired
}
render() {
const {
asyncValidating,
dirty,
fields: {name, email, occupation, currentlyEmployed, sex},
fieldArray: {members},
active,
handleSubmit,
invalid,
resetForm,
pristine,
valid
} = this.props;
const styles = require('./SurveyForm.scss');
```
const renderInput = (field, label, showAsyncValidating) =>
{label}
{showAsyncValidating && asyncValidating && }
{field.error && field.touched &&
{field.dirty && D}
{field.active && A}
{field.visited && V}
{field.touched && T}
const renderField = props => (
```
{props.placeholder}
{props.touched && props.error && {props.error}}
);
```
const renderMembers = ({ fields }) => (
```
-
fields.push({})}>Add Member
-
fields.remove(index)}/>
Member #{index + 1}
{fields.map((member, index) =>
)}
);
```
return (
{renderInput(name, 'Full Name')}
{renderInput(email, 'Email', true)}
{renderInput(occupation, 'Occupation')}
Currently Employed?
Sex
Male
Female
Submit 4
Reset 4
Props from redux-form 4
Active Field
{active}
Dirty
{dirty ? 'true' : 'false'}
Pristine
{pristine ? 'true' : 'false'}
Valid
{valid ? 'true' : 'false'}
Invalid
{invalid ? 'true' : 'false'}
);
```
}
}
Contributor guide
Assessment
This issue has not been assessed yet.