-
我将 redux-form 与 FieldArray 一起使用。默认情况下,数组中将有 1 个元素,并且它是从 JSON 填充的。我最多可以添加 3 个
FieldArray 组件中的元素。
-
在下面的代码中,“elementList”
属性来自 JSON,而且我还存储了名为
作为“元素”和“元素列表”。我用 elementList 初始化这些存储变量
首先从 JSON 开始,然后在“添加”时不断更新存储变量
单击“元素”。我可以看到商店变量正在更新
正确但在屏幕上 Field 数组元素未更新。这可能是因为 FieldArray 中的名称属性“elementList”可能引用
JSON 元素。
如果我可以在名称属性中引用存储变量“elementList”或“elements”,是否可能
'FieldArray' 的。请指教。
主页
<div>
<FieldArray name="elementList" component={Elements}
props={this.props}/>
<button type="button" className="btn btn-primary"
onClick={event => this.addElement(elementDTO)}>Add Element
</button>
<br/>
</div>
addElement(elementDTO){
if(this.props.elements && this.props.elements!=undefined && this.props.elements.length >= 3){
return;
}
this.props.addReqElement(this.props.elements);
}
字段数组页面
const elements= ({props, meta: {error, submitFailed}}) => {
const {fields} = props;
return (
{fields.map((element, index) => (
<div>
//Field definitions
</div>
))}
谢谢
更新:
从 Redux Action 和Reducer 添加方法
export function addReqElement(childList) {
let state = store.getState()
let newChild=
state.requestReducer.DTOobj.requestDoc; //this is an empty element coming from backend with few properties and adding rest of the //proerties as below to create a new child
newChild.prop1 = null
newChild.prop2 = null
childList.push(newChild)
return (dispatch) => {
dispatch(setDoc(childList));
}
}
export function setDoc(payload) {
return {
type: ADD_DOC,
payload: payload
}
}
更新2:我尝试删除push并使用spread操作符,但它不起作用。我也有内部数组,因为我使用不同的策略,所以它正在工作。我采用拉父数组,它是索引并使用新的内部数组更新父数组。它可以工作,但父数组我不知道应该如何使其工作。我尝试将主数组设置为表单道具并通过分派操作来渲染整页,但它不起作用。请问lz有什么建议吗?
从主数组页面:
render() {
const {fields, parentArrayFromStore} = this.props;
return (
<div className="col-sm-12">
{fields.map((doc, index) => (
<div key={index}>
<div className="col-sm-12">
<FieldArray name={`${doc}.innerArrayList`} component={CustomInnerArrayComponent}/>
</div>
<div className="row">
<div className="col-sm-4">
<button type="button" className="btn btn-primary"
onClick={event => this.addInnerArray(index, parentArrayFromStore ,fields.get(index).innerArrayList)}>Add Printer
</button>
</div>
</div>
</div>
))}
</div>)
}
在行动类
export function addInnerArray(index, parentArrayFromStore, innerArrayList) {
let newInnerItem= {};
newInnerItem.prop1 = null
newInnerItem.prop2 = null
innerArrayList.push(newInnerItem)
parentArrayFromStore[index].innerArrayList = innerArrayList;
return (dispatch) => {
dispatch(setParentArray(parentArrayFromStore));
}
}
export function setParentArray(payload) {
return {
type: ADD_DOC,
payload: payload
}
}