形式与initialValues属性在一个组件中无法识别多个表单（redux-form v7.0.4）

Question

我在单个组件中创建多个表单并使用redux存储初始化它我在{{1}中定义了表单的名称属性} element，而不是<form>帮助器，这里记录了......

How to embed the same redux-form multiple times on a page?

我正在使用＆＃39;列表＆＃39;创建表单。对象并使用reduxForm()将其传递给我的组件。我尝试使用mapStateToProps()设置表单的初始值，但Redux Form产生以下错误，并要求在initialValues={}帮助程序中声明表单... < / p>

1）道具类型失败：道具reduxForm()在form标记为必需，但其值为Form(ItemInfo)。

2）标记上的未知道具undefined。从元素中删除此道具。

这似乎与此处提到的问题类似......

https://github.com/erikras/redux-form/issues/28

initialValues

这是＆＃39;列表＆＃39;的一个例子。对象被退回......

import _ from 'lodash';
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import * as actions from '../../../actions';
import {Col} from 'react-grid-system';
import RaisedButton from 'material-ui/RaisedButton';

class ItemInfo extends Component {

  renderSingleItem(item){
    let theItem =  _.map(_.omit(item, '_id'), (value,field) => {
        return (
          <div key={field}>
            <label>{field}</label>
            <Field component="input" type="text" name={field} style={{ marginBottom: '5px' }} />
            <div className="red-text" style={{ marginBottom: '20px' }}>
            </div>
          </div>
        );
      });
    return theItem || <div></div>;
  }

  renderItemInfo() {

      if (this.props.listing.listing !== undefined) {
        let theItems = _.map(this.props.listing.listing.items, item => {                
            return (
                <Col key={item._id} md={3}>
                  <form form={`editItemInfo_${item._id}`} initialValues={item}>
                    {this.renderSingleItem(item)}
                    <RaisedButton secondary={true} label="Remove Item"/>
                    <RaisedButton primary={true} label="Update Item"/>
                  </form>
                </Col>
            );
        });
        return theItems || <div></div>;
      }

  }

  render() {
    return (
        <div className="row">
            {this.renderItemInfo()}
        </div>
    );
  }
}

function mapStateToProps({listing}) {
  return { listing };
}

ItemInfo = reduxForm({
  fields: ["text"],
  enableReinitialize: true
})(ItemInfo)

ItemInfo = connect(mapStateToProps,actions)(ItemInfo)

export default ItemInfo

感谢您的帮助！

Answer 1

我终于想出了一个小黑客的解决方法。看来这是Redux Form的一个错误，而我的初始实现有一部分错误。


正确实施

正如@erikras所详述的，Redux Form创建者...... https://github.com/erikras/redux-form/issues/28

表单配置参数需要传递给已修饰的组件，而不是传递给jsx <form>组件。为此，我将表单重构为导入的子组件，并将其映射到这些组件上......

 renderItemForms() {
    if (this.props.listing.listing !== undefined) {
      return _.map(this.props.listing.listing.items, item => {
          return (
            <ItemInfo form={`editItemInfo_${item._id}`} initialValues={item} key={item._id} item={item} /> 
          );
      });
    }
  }

Redux表单错误

上述实现会将您的表单正确连接到redux存储，但仍会创建'Failed prop类型：prop表单被标记为必需'错误，会破坏您的视图。我找到的解决方案是在redux-form选项的'form'属性中粘贴任意随机字符串以防止错误......

ItemInfo = reduxForm({
  form: 'any random string here',
  fields: ["text"],
  enableReinitialize: true
})(ItemInfo)

initialValues的第二条错误消息仅在第一个'form parameter'错误之后，所以现在一切都没有错误，在Redux开发工具中，我可以确认内联表单属性是否覆盖了属性reduxForm()个选项。现在，redux商店已成功管理表单，并使用正确的“表单名称/ ID”...

我希望这有助于拯救别人头痛的问题。请原谅我上面的解释中的任何不正确的术语，我仍然是Redux / React菜鸟，但是如果有人想要更多细节我很乐意提供有关我实施的更多细节。