reactjs - ReduxForm : using formValueSelector within a FieldArray for conditional fields doesn't render immediately

Question

这种有点的工作原理，除了当我进行 service_type 单选选择时附加 block 不会显示，它仅在我完成附加操作(例如添加或删除)时才会弹出/重新呈现服务 block 或更改另一个字段。

    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 .