一个组件中的多个表单无法识别 form 和 initialValues 属性（redux-form v7.0.4）

Question

我在单个组件中创建多个表单并使用 redux 存储初始化它们我在 <form> 元素中定义表单的 name 属性，而不是在 reduxForm() 帮助程序中，记录在此处...

我正在从 'listing' 对象创建表单并使用 mapStateToProps() 将其传递到我的组件。我正在尝试使用 initialValues={} 设置表单的初始值，但 Redux 表单产生以下错误并要求在 reduxForm() 帮助程序中声明表单...

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

2) 标签上的未知道具 initialValues。从元素中删除此道具。

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

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

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

这是返回 'listing' 对象的示例...

{ _id: 59b5eebd33a3a833b6ac1386,
  _user: 59aff09a11011f0cfd8d7666,
  location: 'nother',
  availability: 'jhkvljh',
  price: 9860,
  __v: 0,
  items:
   [ { equipmentType: 'kbj;kj',
       make: ';jb',
       model: ';;jb',
       watts: 9860,
       bulb: 'kjbkj',
       condition: 'kjbkjb',
       _id: 59b5eebd33a3a833b6ac1387 },
     { condition: 'houy',
       bulb: 'jhg',
       watts: 8907,
       model: 'mode',
       make: 'maker',
       equipmentType: 'smoquip',
       _id: 59b5f9cf13b37234ed033a75 } ] }

感谢您的帮助！

Answer 1

我终于想出了一个小技巧来解决这个问题。看来这一部分是 Redux Form 的错误，另一部分是我最初实现的错误。

正确实施

正如 Redux 表单创建者@erikras 所详述... 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 type: The prop form is marked as required' 错误，从而破坏您的观点。我找到的解决方案是在 redux-form 选项的 'form' 属性中粘贴任何随机字符串以防止错误...

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

initialValues 的第二条错误消息仅在第一个 'form parameter' 错误之后出现，所以现在一切都没有错误，在 Redux 开发工具中我可以确认内嵌形式属性正在覆盖 reduxForm() 选项中的属性。表单现在可以通过正确的 'form name/id'...

成功地由 redux 存储管理

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

一个组件中的多个表单无法识别 form 和 initialValues 属性（redux-form v7.0.4）

form & initialValues properties not recognized with multiple forms in one component (redux-form v7.0.4)

reactjs

redux

redux-form

react-redux