- 首页
- 前端开发
- 如何使用 redux 存储变量更新 FieldArray 元素
如何使用 redux 存储变量更新 FieldArray 元素
[英] how to update FieldArray elements with redux store variable
本文介绍了如何使用 redux 存储变量更新 FieldArray 元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用带有 FieldArray 的 redux-form.默认情况下，数组中有 1 个元素，它是从 JSON 填充的.我最多可以添加 3FieldArray 组件中的元素.
在下面的代码中，'elementList'属性来自 JSON，我也有名为的存储变量作为元素"和元素列表".我用 elementList 初始化这些存储变量首先从 JSON 开始，然后在添加"时不断更新存储变量元素'被点击.我可以看到商店变量正在更新正确但在屏幕上字段数组元素未更新.这可能是因为 FieldArray 中的名称属性elementList"可能引用JSON 元素.
是否有可能，如果我可以在 name 属性中引用存储变量 'elementList' 或 'elements''FieldArray'.请指教.
主页
<FieldArray name="elementList";组件={元素}props={this.props}/><按钮类型=按钮"className =btn btn-primary"；onClick={事件=>this.addElement(elementDTO)}>添加元素<br/>
添加元素(元素DTO){if(this.props.elements && this.props.elements!=undefined && this.props.elements.length >= 3){返回;}this.props.addReqElement(this.props.elements);}
字段数组页面
const elements= ({props, meta: {error, submitFailed}}) =>{const {fields} = props;返回 ({fields.map((element, index) => (<div>//字段定义
))}
谢谢
更新:从 Redux Action 和 Reducer 添加方法
导出函数 addReqElement(childList) {让 state = store.getState()让 newChild=state.requestReducer.DTOobj.requestDoc;//这是一个来自后端的空元素，具有很少的属性，并添加了//属性的其余部分，如下所示以创建一个新的子元素newChild.prop1 = nullnewChild.prop2 = nullchildList.push(newChild)返回(调度)=>{调度(setDoc(childList))；}}导出函数 setDoc(payload) {返回 {类型:ADD_DOC，有效载荷:有效载荷}}
更新 2:我尝试删除 push 并使用了 spread operator ，但没有奏效.我也有内部数组，这在我使用不同的策略时起作用.我拉取父数组，它是索引并用新的内部数组更新父数组.它有效，但父数组我不知道我应该如何使它工作.我尝试将主数组设置为表单道具并通过分派动作来呈现整个页面，但它不起作用.有什么建议吗?
来自主阵列页面:
render() {const {fields, parentArrayFromStore} = this.props;返回 (<div className="col-sm-12">{fields.map((doc, index) => (<div key={index}><div className="col-sm-12"><FieldArray name={`${doc}.innerArrayList`} component={CustomInnerArrayComponent}/>
<div className="row"><div className="col-sm-4"><按钮类型=按钮"className =btn btn-primary"；onClick={事件=>this.addInnerArray(index, parentArrayFromStore ,fields.get(index).innerArrayList)}>添加打印机
))}</div>)}
实战课
导出函数 addInnerArray(index, parentArrayFromStore,innerArrayList) {让 newInnerItem= {};newInnerItem.prop1 = nullnewInnerItem.prop2 = nullinnerArrayList.push(newInnerItem)parentArrayFromStore[index].innerArrayList = innerArrayList;返回(调度)=>{dispatch(setParentArray(parentArrayFromStore));}}导出函数 setParentArray(payload) {返回 {类型:ADD_DOC，有效载荷:有效载荷}}
解决方案
问题是在更新构造函数或 reducer 中的状态时，函数中的 push 语句使用 concat 或 spread 运算符 [...]>我在这里做了一个样本请检查
onAddItem() {let list = [...this.state.items, {text:`Check 1`}];this.setState({items:list});}
在您的情况下，您可以执行以下操作
let arr = [...childList, newChild]
然后发送 arr
dispatch(setDoc(arr));
I am using redux-form with a FieldArray.By default 1 element will be there in array and it is populated from JSON. I can add upto 3
elements in FieldArray component.
In below code, 'elementList'
property is coming from JSON and also I have store variables named
as'elements' and 'elementList'. I initialize these store variable with elementList
from JSON at first and then keep updating store variables when 'Add
Element' is clicked on. I can see store variables are updating
properly but on screen Field array elements are not updating.It may be because name property 'elementList' in FieldArray may refer to
JSON element.
Is it possible, if I can refer to store variables 'elementList' or 'elements' in name property
of 'FieldArray'. Please advice.
Main page
<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);
}
Field Array page
const elements= ({props, meta: {error, submitFailed}}) => {
const {fields} = props;
return (
{fields.map((element, index) => (
<div>
//Field definitions
</div>
))}
Thank you
Update:
Adding method from Redux Action and 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
}
}
Update 2: I tried to remove push and used spread operator , but it did not work. I have inner array also, that is working as I am using different strategy. I take pull parent array ,it's index and update parent array with the new inner array. It works but parent array I am not getting how should I make it work. I tried to set the main array to the form props and render full page by dispatching an action but it did not work. Any suggestions plz?
From the main array page:
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>)
}
In Action class
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
}
}
解决方案
Hi the issue is with the push statement in your function when updating states in the constructor or reducer use concat or spread operator[...]>
I have made a sample over here
please check
onAddItem() {
let list = [...this.state.items, {text:`Check 1`}];
this.setState({items:list});
}
in your case you can do the following
let arr = [...childList, newChild]
then dispatch the arr
dispatch(setDoc(arr));
这篇关于如何使用 redux 存储变量更新 FieldArray 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
