Question

所以我继承了一个项目，我需要利用FieldArrays创建一个动态的项目列表。它所在的“形式”实际上并不在<form>中，因此我不得不将我的FieldArrays代码分割成它自己的组件，以便让redux神奇地让它“工作”到做我想要它做的事情，比如用数据预填充字段，能够轻松添加/删除字段等。

问题在于我似乎无法使用较高组件中的道具预先填充组件，以便redux FieldArray可以将其拾取，无论我尝试过什么。

这是我的代码：

renderFlooring({ fields, meta: { touched, error, submitFailed } }) {

      return (
        <div>
          <div>
            <div className={styles.flooringHeading}>
              <h3> Site Specifications </h3>
              <button type="button" className={styles.add} onClick={() => fields.push({})}>Add Square Footage</button>
            </div>
            {(touched || submitFailed) && error && <span>{error}</span>}
            {fields.length === 0 &&
              <p className={styles.noFlooring}>No square footage or flooring type has been added.</p>
            }
          </div>
          <ul className={styles.sqFtList}>
            {fields.map((flooring, index) =>
              <li className={styles.card} key={index}>
                <div className="page-form__block">
                  <p> Estimate the total area of work in square feet </p>
                  <Field name={`${flooring}.square_footage`} onChange={this.changeFlooringSquareFootage} component={TextField} hintText="Square Feet" />
                </div>
                <div className="page-form__block">
                  <p> Enter Floor Type </p>
                  <Field name={`${flooring}.flooring_type`} onChange={this.changeFlooringType} component={TextField} hintText="Floor Type (VCT, Carpet, Vinyle)" />
                </div>
                <button
                  type="button"
                  title="Remove"
                  className={styles.remove}
                  onClick={() => {
                    fields.remove(index);
                    this.props.removeFlooring(index);
                  }}>Remove</button>
              </li>
            )}
          </ul>
        </div>
      );
    }



  render() {
    return (
      <FieldArray name="flooring" component={this.renderFlooring}/>
    );
  }
}

export default reduxForm({
  form: 'manageSquareFootageForm',
  initialValues: this.props.flooring
})(ManageSquareFootageForm);

对此特定组件进行处理的组件如下所示：

<ManageSquareFootageForm
   changeFlooringType={this.changeFlooringType}
   changeFlooringSquareFootage={this.changeFlooringSquareFootage}
   removeFlooring={this.removeFlooring}
   flooring={this.props.flooring}
/>

我甚至尝试在initialValues上添加<ManageSquareFootageForm>，但最终会导致fields.push({})功能停止工作。

我的数据如下所示：

[
   {square_footage: "500", flooring_type: "carpet"},
   {square_footage: "1000", flooring_type: "carpet"}
]

我能在这里做些直截了当的事吗？

提前致谢！

Answer 1

之所以发生这种情况是因为reduxFrom HOC不知道组件道具，你确实从道具设置了initialValues

const FootableForm = reduxForm({
  form: 'manageSquareFootageForm'
})(ManageSquareFootageForm);

export default connect((state, props) => ({
    initialValues: props.flooring 
  }))(FootableForm)

但是，您的Field不会在初始加载时生成，因此不会填充，您宁愿使用ReduxForm中的change函数更新值。

const defaultValues = { square_footage: "500", flooring_type: "carpet" }


class FieldArraysForm extends React.Component {
  componentDidUpdate(prevProps) {
    const {flooring, change} = this.props;
    const {flooring: prevflooring} = prevProps;
    console.log(JSON.stringify(flooring));
    // Do nothing if no flooring, or no change to flooring
    if (!flooring || flooring === prevflooring) {
      return;
    }

    if (!prevflooring || flooring.length > prevflooring.length) {
      change('flooring', flooring.slice(0, flooring.length - 1).concat(defaultValues));
    }

  }
  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <FieldArray name="flooring" component={renderFlooring} />
      </form>
    );
  }
};


const FieldForm = reduxForm({
  form: 'fieldArrays', // a unique identifier for this form
  validate,
})(FieldArraysForm);

export default connect(state => ({
  flooring: (getFormValues('fieldArrays')(state) || {}).flooring
}))(FieldForm);

检查工作 codeSandbox

React Redux - 为什么我不能轻易地从this.props设置initialValues？

1 个答案: