Я использую 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 давал неопределенный. Пытался изменить код
-> Первая попытка Мне пришлось внести изменения в код для обхода дочернего массива: do c .childList изменен на fields.get (index) .childList; теперь я смог увидеть childList, но код fields.get (index) .childList.map не работал.
-> Вторая попытка перемещения перемещенного дочернего массива на отдельный компонент, это сработало . Отправка полного кода в качестве ответа.
Спасибо.