如何使用redux存储变量更新FieldArray元素

问题描述

• 我正在将Redux-form与FieldArray一起使用。默认情况下，数组中将存在1个元素，并且它是从JSON填充的。我可以在FieldArray组件中最多添加3个
  元素。

• 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 3elements in FieldArray component.

在下面的代码中，'elementList'
属性到来了从JSON，并且我还有名为
的变量存储为'elements'和'elementList'。首先，我使用JSON中的elementList
初始化这些商店变量，然后在点击添加
元素时继续更新商店变量。我可以看到存储变量正在正确地更新
，但是在屏幕上字段数组元素没有更新。可能是因为FieldArray中的名称属性'elementList'可能引用了
JSON元素。

In below code, 'elementList'property is coming from JSON and also I have store variables namedas'elements' and 'elementList'. I initialize these store variable with elementListfrom JSON at first and then keep updating store variables when 'AddElement' is clicked on. I can see store variables are updatingproperly but on screen Field array elements are not updating.It may be because name property 'elementList' in FieldArray may refer toJSON element.

是否可以在 FieldArray的名称属性
中引用存储变量 elementList或 elements。请咨询。

Is it possible, if I can refer to store variables 'elementList' or 'elements' in name propertyof 'FieldArray'. Please advice.

主页

  <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添加方法

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
    }
}

更新2：我试图删除推并使用了传播算子，但它不起作用。我也有内部数组，因为我正在使用不同的策略，所以正在工作。我获取pull父数组（它的索引），并使用新的内部数组更新父数组。它可以工作，但是父数组我没有得到如何使它工作。我试图将主数组设置为props形式，并通过调度一个动作来呈现整个页面，但是它不起作用。有什么建议吗？

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?

从主数组页面：

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
    }
}

推荐答案

您好，问题出在在构造函数或化简器中更新状态时，函数中的push语句使用concat或spread运算符[...]
我在
请检查

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 hereplease 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]

然后分派arr

 dispatch(setDoc(arr));

这篇关于如何使用redux存储变量更新FieldArray元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！