0

我对使用 redux 表单还比较陌生，因为它的工作原理仍然是非常黑的魔法，尤其是在从数据中预填充字段时，它似乎只是“发生”了。

好吧，我正在<FieldArray>向现有表单添加一个从epicObservable 数据中填充的表单。问题是返回的数据导致错误发生

Uncaught TypeError: b.equals is not a function
    at equals (index.js?3bd9:52)
    at ConnectedFieldArray.shouldComponentUpdate (ConnectedFieldArray.js?c38c:87)
    at checkShouldComponentUpdate (react-dom.development.js?61bb:11191)
    at updateClassInstance (react-dom.development.js?61bb:11640)
    at updateClassComponent (react-dom.development.js?61bb:14648)
    at beginWork (react-dom.development.js?61bb:15598)
    at performUnitOfWork (react-dom.development.js?61bb:19266)
    at workLoop (react-dom.development.js?61bb:19306)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)

对我来说唯一有意义的是容纳<Field>元素的组件不匹配，以便 redux 适当地填充字段。

这是我的组件，它被输入到<FieldArray>我的 redux 表单中：

import PropTypes from 'prop-types';
import React, { Fragment } from 'react';
import { Field } from 'redux-form/immutable';

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} placeholder={label} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const FormMilestones = ({ fields, meta }) => (
  <Fragment>
    {fields.map((milestone, index) => {
      console.log('milestone?', milestone);
      return (
        <div key={index}>
          <button
            type="button"
            title="Remove milestone"
            onClick={() => fields.remove(index)}
          />
          <Field
            name={`${milestone}.name`}
            component={renderField}
            fullWidth
            autoFocus
            label="Milestone name"
          />
          <Field
            name={`${milestone}.startingAt`}
            component={renderField}
            fullWidth
            autoFocus
            label="Start date"
          />
          <Field
            name={`${milestone}.endingAt`}
            component={renderField}
            fullWidth
            autoFocus
            label="Ending At"
          />
          <Field
            name={`${milestone}.description`}
            component={renderField}
            fullWidth
            autoFocus
            label="Description"
          />
        </div>
      );
    })}
    <button type="button" onClick={() => fields.push()}>
      + Add Milestone
    </button>
  </Fragment>
);
FormMilestones.propTypes = {
  fields: PropTypes.object.isRequired,
  meta: PropTypes.object,
};
export default FormMilestones;

这是<FieldArray>我的 redux 表单中使用的那个。除非有必要，否则我不会费心复制整个表单，因为我的功能问题存在于我的<FormMilestones>组件中。

<FieldArray
   name="milestones"
   component={FormMilestones}
/>

有什么明显的东西突然出现在任何人身上吗？

提前致谢！

4

0 回答 0