Question

我对使用redux表单还是比较陌生的，因为关于它的工作原理仍然是很多不可思议的事情，尤其是当从数据中预填充字段时，它似乎只是“偶然”。

我正在将<FieldArray>添加到现有表单中，该表单是从epic的Observable数据中填充的。问题在于返回的数据导致发生错误

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适当地填充字段。

以下是我的组件，以我的redux形式输入到<FieldArray>中：

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;

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

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

有什么明显的东西弹出给任何人吗？

谢谢！

Redux FieldArray组件将不会填充-出现错误：b.equals不是函数

0 个答案: