Redux Form - свойства "form={ }" и "initialValues ​​= {}" не распознаются в нескольких формах (redux-form v7.0.4)

Question

Я создаю несколько форм в одном компоненте, и для их инициализации с помощью хранилища избыточности я определяю "имя формы" в элементе

, а не в помощнике reduxForm(), который был задокументирован здесь.,

Как встраивать одну и ту же редукционную форму на страницу несколько раз?

Я создаю формы из объекта 'list' и передаю его своим компонентам с помощью mapStateToProps(). Я пытаюсь установить начальные значения формы с помощью initialValues ​​={}, но Redux Form выдает следующие ошибки и просит объявить форму в помощнике 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

Это пример возвращаемого объекта 'list'...

{ _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 и одна часть ошибки с моей первоначальной реализацией.


Правильная реализация

Как описано @erikras, создателем Redu Form... https://github.com/erikras/redux-form/issues/28

Параметр конфигурации формы необходимо передать декорированному компоненту, а не компоненту jsx . Чтобы сделать это, я реорганизовал свою форму в импортированный дочерний компонент и вместо этого сопоставил их...

 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

Вышеприведенная реализация правильно соединит ваши формы с хранилищем редуксов, но при этом все равно создаст ошибку "Failed prop type: форма prop помечена как необходимая", которая нарушит ваши представления. Решение, которое я нашел, состоит в том, чтобы вставить любую случайную строку в свойство 'form' параметров reduxForm, чтобы предотвратить ошибку...

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

Второе сообщение об ошибке "initialValues" было только после первой ошибки "параметра формы", так что теперь все без ошибок, и в инструментах разработчика Redux я могу подтвердить, что встроенное свойство формы переопределяет свойство из параметров reduxForm(). В настоящее время формы успешно управляются хранилищем редуксов с правильным именем формы / идентификатором...

Я надеюсь, что это помогает спасти кого-то еще от незначительной головной боли. Пожалуйста, извините за неправильную терминологию в моем объяснении выше, я все еще новичок в Redux/React, но если кто-то хочет больше подробностей, я рад предоставить более подробную информацию о моей реализации.