Компонент Redux FieldArray не заполняется - возникает ошибка: b.equals не является функцией - PullRequest
Новая
       4

Компонент Redux FieldArray не заполняется - возникает ошибка: b.equals не является функцией

0 голосов
/ 23 апреля 2019

Я все еще относительно новичок в работе с избыточной формой, поскольку все еще очень много черной магии относительно того, как она работает, особенно когда дело доходит до заполнения полей из данных, кажется, что это просто "происходит".

Что ж, я нахожусь в процессе добавления <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>, не совпадает по порядку.для редукса, чтобы заполнить поля соответствующим образом.

Вот мой компонент, который подается в <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;

А вот <FieldArray>, который используется вмоя излишняя форма.Я не удосужился скопировать всю форму, за исключением случаев, когда это необходимо, поскольку моя функциональная проблема существует в моем <FormMilestones> компоненте. 

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

Появляется ли что-нибудь очевидное для кого-либо?

Заранее спасибо!

...