Добавление объекта внутри FieldArray не отрисовывает страницу

Question

Я использую React и Redux. У меня есть FieldArray внутри FieldArray, я хочу добавить дочерний объект во внутренний массив. Я внес изменения в код и вижу, что объект был добавлен во внутренний массив, но страница не отображается повторно, изменения не отражаются на странице.

Изменения кода следующие:

Main страница: функция рендеринга

 <div>
      <FieldArray name="parentList" component={CustomCom}                                              
      props={this.props}/>
      <br/>
      <button type="button" className="btn btn-primary"
          onClick={event => this.addDoc(mainDTO)}>Add Doc
      </button>
    </div>


    function mapStateToProps(state) {
        return {
             parentList: state.reqReducer.parentList,
        }
    }

Метод рендеринга компонента CustomCom

   {fields.map((doc, index) => (
     <div className="col-sm-12">
        {doc.childList  && doc.childList  != undefined && doc.childList  .map((childEle, index) => (
         <div>
             <div className="row"> 
               //redux field
             </div>
            <div className="col-sm-4">
              <button type="button" className="btn btn-primary"
                 onClick={event => this.addChild(index, 
                 docs,fields.get(index).childList)}>Add Child
            </button>
         </div>
    </div>
    ))}

   addChild(index, docs, childList){
        this.props.addChild(index, docs, childList);
    }

    function mapStateToProps(state, ownProps) {
        return {
     docs: state.reqReducer.docs,  //same as parentList
     childList: state.reqReducer.childList
    }
    }

//Action
    export function addChild(index, docs, childList) {
        let newChild= {};
        newChild.prop1 = null
        newChild.prop2 = null
        childList.push(newChild)
        docs[index].childList = childList;
        return (dispatch) => {
            dispatch(setDoc(docs));
        }
    }
    

export function setDoc(payload) {
    return {
        type: ADD_DOC,
        payload: payload
    }
}

//Reducer

 case ADD_DOC:
    return {...state, parentList: action.payload};

При вызове addChild я отправляю действие ADD_DO C после установки дочернего элемента в родительский список и, в свою очередь, установит / обновит parentList только что добавленным потомком. Я использую parentList на главной странице родительского FieldArray. Пожалуйста, дайте мне знать, почему он не отображается, любые инструкции были бы действительно полезны.

Спасибо.

Обновление-> Пожалуйста, дайте мне знать, могу ли я получить доступ к дочернему массиву, подобному этому (сделать c .childList) в основном массиве l oop, где do c - родительский элемент

 {fields.map((doc, index) => (  //Main array traversing
        <div>
            <div className="col-sm-12">
                {doc.childList  && doc.childList != undefined && doc.childList.map((singleChild, index) => (  
                ))}
            </div>
        </div>          
    }

Update2:

Компонент визуализирован, но do c .childList давал неопределенный. Пытался изменить код

1. -> Первая попытка Мне пришлось внести изменения в код для обхода дочернего массива: do c .childList изменен на fields.get (index) .childList; теперь я смог увидеть childList, но код fields.get (index) .childList.map не работал.

2. -> Вторая попытка перемещения перемещенного дочернего массива на отдельный компонент, это сработало . Отправка полного кода в качестве ответа.

Спасибо.

Answer 1

Компонент дочернего массива отображается из ParentArray l oop следующим образом

<div className="col-sm-12">
        <FieldArray name={`${doc}.childList`} component={ChildComponent}/>
  </div>

В ChildComponent

 <div className="col-sm-12">
        {fields.map((childEle, index) => (
            <div className="col-sm-2">
                <Field component={ReactSingleSelect}
                                                   options=(DTO.childOptions}
                                                   label={"Name"}
                                                   name={`${childEle}.name`}
                                                     />
            </div>    
        ))}
    </div>

Answer 2

Я собираюсь сказать, что это похоже на мутацию состояния в вашем создателе действий.

//Action
export function addChild(index, docs, childList) {
  let newChild= {};
  newChild.prop1 = null
  newChild.prop2 = null
  childList.push(newChild) // <-- mutates state.reqReducer.childList
  docs[index].childList = childList; // <-- mutates state.reqReducer.docs
  return (dispatch) => {
    dispatch(setDoc(docs));
  }
}

Обычно вы хотите неглубоко скопировать элемент массива и также неглубоко скопируйте свойства обновляемого элемента.

//Action
export function addChild(index, docs, childList) {
  const newChild = {
    prop1: null,
    prop2: null,
  };

  // shallow copy childList array and append new child element
  const newChildList = [...childList, newChild];

  // shallow copy docs and update childList property of element matching index
  const newDocs = docs.map((el, i) => i === index ? {
    ...el,
    childList: newChildList,
  } : el);
  
  return (dispatch) => dispatch(setDoc(docs));
}