ReduxForm : 조건부 필드의 FieldArray에서 formValueSelector를 사용하면 즉시 렌더링되지 않습니다.

Question

일종의은 service_type 라디오 선택시 추가 블록이 표시되지 않는다는 것을 제외하면 작동하지만 if/서비스 블록 추가 또는 제거 또는 다른 필드 변경과 같은 추가 작업을 완료합니다.

import './Register.scss'; 
    import React, { Component, PropTypes } from 'react'; 
    import { connect } from 'react-redux'; 
    import { Field, reduxForm, FieldArray, formValueSelector } from 'redux-form'; 
    import MenuItem from 'material-ui/MenuItem'; 
    import { RadioButton } from 'material-ui/RadioButton' 
    import { 
     TextField, 
     SelectField, 
     TimePicker, 
     RadioButtonGroup 
    } from 'redux-form-material-ui'; 
    import validate from './validate'; 

    class OnboardPageThree extends Component { 
     static propTypes = { 
     handleSubmit: PropTypes.func.isRequired, 
     previousPage: PropTypes.func.isRequired 
     } 

     constructor(props, context) { 
      super(props, context); 
     } 

     renderGroups = ({ fields, meta: { touched, error } }) => { 
     return (
      <div> 
      {fields.map((service, index) => 
       <div className="service-type-group" key={index}> 
       <h4>{index} Service</h4> 
       <button 
        type="button" 
        className="remove-button" 
        onClick={() => fields.remove(index)}>Remove 
       </button> 
       <div className="field-group half"> 
        <Field 
        name={`${service}.service_type`} 
        component={RadioButtonGroup} 
        floatingLabelText="Service type" 
        className="textfield"> 
        <RadioButton value="first_come_first_serve" label="First-come first-served"/> 
        <RadioButton value="appointments" label="Appointment"/> 
        </Field> 
       </div> 
       {/* Sort of works except doesn't populate until forced re-render by adding another to array or updating a previous field */} 
       {typeof this.props.services[index].service_type != undefined && this.props.services[index].service_type == "first_come_first_serve" ? <div className="fieldset"> 
        <p className="label">Timeslot capacity and length when creating a first-come-first-served (line-based) service blocks</p> 
        <div className="field-group sentence-inline"> 
        <Field 
         name={`${service}.max_people`} 
         type="number" 
         component={TextField} 
         label="Number of people per timeslot" 
         className="textfield" 
        /> 
        <p>people are allowed every</p> 
        <Field 
         name={`${service}.time_interval`} 
         component={SelectField} 
         className="textfield"> 
         <MenuItem value="5" primaryText="5 minutes" /> 
         <MenuItem value="10" primaryText="10 minutes" /> 
         <MenuItem value="15" primaryText="15 minutes" /> 
         <MenuItem value="30" primaryText="30 minutes" /> 
         <MenuItem value="60" primaryText="60 minutes" /> 
         <MenuItem value="all_day" primaryText="All day" /> 
        </Field> 
        <p>.</p> 
        </div> 
       </div> : null} 
       </div> 
      )} 
      <button 
       type="button" 
       className="action-button" 
       onClick={() => fields.push({})}>Add Service 
      </button> 
      {touched && error && <span className="error-message">{error}</span>} 
      </div> 
     ); 
     } 

     render() { 
     const { handleSubmit, previousPage } = this.props; 

     return (
      <form onSubmit={handleSubmit}> 
      <h2>When do you provide service?</h2> 
      <FieldArray name="service_options" component={this.renderGroups} /> 
      <div className="justify-flex-wrapper service-actions"> 
       <button type="button" className="back-button" onClick={previousPage}>Back</button> 
       <button type="submit" className="action-button">Next</button> 
      </div> 
      </form> 
     ); 
     } 
    } 

    OnboardPageThree = reduxForm({ 
     form: 'onboarding', 
     destroyOnUnmount: false, 
     validate 
    })(OnboardPageThree) 

    const selector = formValueSelector('onboarding'); 
    OnboardPageThree = connect(
     (state) => { 
     const services = selector(state, 'service_options'); 
     return { 
      services 
     }; 
     } 
    )(OnboardPageThree); 

    export default OnboardPageThree; 

Answer 1

예. 그렇습니다. FieldArray은 크기 변경시에만 해당 항목의 변경 사항을 다시 렌더링하지 않습니다 (큰 배열의 경우 은 실제로).

배열 항목에 대해 별도의 연결된 구성 요소를 만들어야합니다. 나는 a working demo here을 해결했다.