我在我的一个项目中使用Redux Form(几乎只是从Rally Coding复制动态的),但每当我访问this.props.fields时,它只是给我一个我的名字的数组字段而不是对象。甚至更奇怪的是,我将这些代码复制并粘贴到我使用RF的另一个项目中,并且它从this.props.fields给了我我想要的东西。我的一部分认为我错误地设置了RF,但我确实将formReducer导入App.js并将其与我的其他Reducer组合。
当我点击调试器时,这个.props.fields = ['查询',' numberOfResults']这会弄乱一切。
这是我的代码:
import _ from 'lodash';
import React, { Component, PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
const FIELDS = {
query: {
type: 'input',
label: 'What are you looking for?'
},
numberOfResults: {
type: 'input',
label: 'Number of Results'
}
};
class YelpForm extends Component {
onSubmit(props) {
console.log('hey cutie')
}
renderField(fieldConfig, field) {
debugger
const fieldHelper = this.props.fields[field]
return (
<div className={`form-group ${fieldHelper.touched && fieldHelper.invalid ? 'has-danger' : '' }`} >
<label>{fieldConfig.label}</label>
<fieldConfig.type type="text" className="form-control" {...fieldHelper} />
<div className="text-help">
{fieldHelper.touched ? fieldHelper.error : ''}
</div>
</div>
);
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(props => this.onSubmit(props))} >
{_.map(FIELDS, this.renderField.bind(this))}
<input type="submit">Submit</input>
</form>
);
}
}
function validate(values) {
const errors = {};
_.each(FIELDS, (type, field) => {
if (!values[field]) {
errors[field] = `Enter a ${field}`;
}
});
return errors;
}
export default reduxForm({
form: 'Yelp Form',
fields: _.keys(FIELDS),
validate
})(YelpForm);
这是我在StackOverflow上的第一个问题;感谢您的帮助!
答案 0 :(得分:0)
尝试降级到redux-form版本5.2.3。似乎版本6.0.2要么是错误的,要么没有正确记录。