Question

我在我的一个项目中使用Redux Form（几乎只是从Rally Coding复制动态的），但每当我访问this.props.fields时，它只是给我一个我的名字的数组字段而不是对象。甚至更奇怪的是，我将这些代码复制并粘贴到我使用RF的另一个项目中，并且它从this.props.fields给了我我想要的东西。我的一部分认为我错误地设置了RF，但我确实将formReducer导入App.js并将其与我的其他Reducer组合。

当我点击调试器时，这个.props.fields = [＆＃39;查询＆＃39;，＆＃39; numberOfResults＆＃39;]这会弄乱一切。

这是我的代码：

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上的第一个问题;感谢您的帮助！

Answer 1

尝试降级到redux-form版本5.2.3。似乎版本6.0.2要么是错误的，要么没有正确记录。

使用ReduxForm

1 个答案: