redux - Redux FieldArray 组件不会填充 - 出现错误:b.equals 不是函数
问题描述
我对使用 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 适当地填充字段。
这是我的组件,它被输入到<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}
/>
有什么明显的东西突然出现在任何人身上吗?
提前致谢!
解决方案
推荐阅读
- python - 如何解决类型错误:无法将复数转换为浮点数
- javascript - 事件侦听器函数不返回任何值
- google-chrome-extension - 如何使用脚本更改存储在 chrome.storage 中的 Chrome 扩展程序的配置
- regex - 有没有办法在电子表格中的“GoogleTranslate()”函数中跳过特定单词/符号?
- selenium - 查找包含“img_width_687_height_517_dpr_4x_ver_”和“.jpg”的元素
- jquery - 使用 jQuery 从 div 中的字段创建 JSON
- arm - 使用 DMA 问题 STM32F0 LL 驱动程序通过 SPI 传输数据
- c# - 如何在 Fastreport 的折线图中同时拥有长轴和短轴?
- swiftui - 在 actionsheet swiftui 中使用 Navigationlink
- c# - 试图从控制台调用 WPF 程序