Redux Form - "form = {}"및 "initialValues ​​= {}"속성이 여러 양식 (redux-form v7.0.4)으로 인식되지 않음

Question

단일 구성 요소 내에 여러 양식을 만들고 redux로 초기화하려고합니다. 가게 여기에 기록 된 reduxForm() 도우미, 내 반대로 내가의 < 형태> 요소 내에서 '폼 이름'을 정의하고 있습니다 ...

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

내가에서 양식을 만드는거야 'listing'객체를 만들고 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 

그리고 이것은 여기에 언급 된 문제와 유사한 것으로 보인다 ... ...

{ _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 양식 작성자는 ... https://github.com/erikras/redux-form/issues/28

양식 구성 매개 변수는 jsx에 장식 된 구성 요소에 전달되지해야 < 양식> 구성 요소. 이를 위해 나는 위의 구현은 REDUX 저장소에 양식을 연결합니다

돌아 오는 양식 버그

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} /> 
     ); 
     }); 
    } 
    } 

... 가져온 아이 컴퍼넌트에 내 양식을 리팩토링 대신 다음을 통해 매핑 올바르게 표시되지만 '실패한 소품 유형 : 소품 양식이 필요한 것으로 표시되었습니다'라는 메시지가 나타나면 오류가 발생합니다. 내가 찾은 해결책은 'initialValues'에 대한

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

두 번째 오류 메시지가 첫 번째 '형태 만 이후였다 ... 오류를 방지하기 위해 reduxForm 옵션의'형태 '속성에 어떤 임의의 문자열을 고수하는 것입니다 매개 변수 '오류가 발생했습니다. 이제 모든 것이 오류가 없으며 Redux 개발 도구에서 인라인 양식 속성이 reduxForm() 옵션의 속성보다 우선 함을 확인할 수 있습니다. 양식은 이제 올바른 '양식 이름/ID'로 redux 상점에서 성공적으로 관리되고 있습니다 ...

나는이 다른 사람 두통 사소한를 저장 도움이되기를 바랍니다. 위의 설명에서 잘못된 용어를 사용해라. 나는 아직도 Redux/React 멍청하다. 그러나 누군가 내 세부 구현에 대해 더 자세히 설명해 주길 바랍니다.