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

Question

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

Answer 1

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));