首页 文章

Redux表单 - “form = {}”和“initialValues = {}”属性无法通过多种形式识别(redux-form v7.0.4)

提问于
浏览
5

我在单个组件中创建多个表单并使用redux存储初始化它我在<form>元素中定义'表单名称',而不是在reduxForm()帮助器中,这里有文档记录 . .

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

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

1)失败的道具类型:道具 formForm(ItemInfo) 中被标记为必需,但其值为 undefined .

2)标记上的未知道具 initialValues . 从元素中删除此prop .

这似乎与这里提到的问题相似......

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 } ] }

谢谢你的帮助!

1 回答

  • 2

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

    Correct Implementation

    由@erikras详细说明,Redu Form创建者...
    enter image description here
    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 Form Bug

    上面的实现将正确地将您的表单连接到redux存储,但它仍然会创建一个会破坏您的视图的'Failed prop type: The prop form is marked as required'错误 . 我找到的解决方案是在reduxForm选项的'form'属性中粘贴任意随机字符串以防止错误...

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

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

    enter image description here

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

相关问题