Был создан компонент InitializePhoneNumbersPanel:
class InitializePhoneNumbersPanel extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(phoneNumbers) {
const { dispatch, operatorId } = this.props;
dispatch(updateOperatorData(operatorId, phoneNumbers, {include: 'phone_numbers'}));
}
render() {
const {
handleSubmit,
submitting,
fields: { phone_numbers }
} = this.props;
console.log('\n... Render ...');
console.log('phone_numbers <<<<< ', phone_numbers);
if (_.isEmpty(phone_numbers)) {
return (
<div className={"fade in"}>
Hello
</div>
)
}
return (
<form onSubmit={handleSubmit(this.onSubmit)}>
<div className="row">
<div className="col-md-12">
<ul className="list-unstyled m-b-0 clearfix">
{phone_numbers && phone_numbers.map((phone, index) =>
<PhoneNumbersPanelItem key={index} phone={phone} phone_numbers={phone_numbers}
index={index}/>
)}
</ul>
</div>
</div>
<div className="row">
<div className="col-md-12">
<button type="button" className="btn btn-sm btn-success" onClick={event => {
event.preventDefault();
phone_numbers.addField();
}}><i className="fa fa-plus"></i>
</button>
</div>
</div>
<hr/>
<div className="row">
<div className="col-md-12">
<button type="submit" disabled={ submitting } className="btn btn-sm btn-success pull-right">
Save
</button>
</div>
</div>
</form>
)
}
}
Затем этот компонент обвернут в Redux-form:
InitializePhoneNumbersPanel = reduxForm({
form: 'phone-numbers-panel',
fields
})(InitializePhoneNumbersPanel);
Затем все это обвернуто connect методом для того чтобы данные из Store были доступны в Redux-form как fields:
function select(state) {
return {
initialValues: {
phone_numbers: _.map(state.operators.items[state.operators.selectedOperator] && state.operators.items[state.operators.selectedOperator].phone_numbers, phoneId => {
return state.phoneNumbers.items[phoneId];
})
},
operatorId: state.operators.selectedOperator
};
}
InitializePhoneNumbersPanel = connect(select)(InitializePhoneNumbersPanel);
Ошибка вот в чем....
Код что выше описан, работает нормально, однако в PhoneNumbersPanelItem компоненте повторяются номера телефонов, которые берутся из phone_numbers переменной.
При первой загрузке страницы с оператором (номера телефонов, которого показываются с помощью PhoneNumbersPanelItem) никаких ошибок не возникает, однако если выбрать другого оператора, то Route изменится, а значит меняется и параметр в store - operatorId а значит меняется объект operators и соответственно номера оператора тоже другие... конечные измененные данные приходят в компонент вот тут:
function select(state) {
return {
initialValues: {
phone_numbers: _.map(state.operators.items[state.operators.selectedOperator] && state.operators.items[state.operators.selectedOperator].phone_numbers, phoneId => {
return state.phoneNumbers.items[phoneId];
})
},
operatorId: state.operators.selectedOperator
};
}Operator
};
}
InitializePhoneNumbersPanel = connect(select)(InitializePhoneNumbersPanel);
Так вот, если количество номеров у выбранного оператора меньше чем у предыдущего оператора, то происходит ошибка:
Uncaught Invariant Violation: findComponentRoot(..., .0.0.0.1.2.0.0.2.1.0.1.1.0.0.0.$1.0.0.0.0.1.1.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.
Насколько я понял, ошибка происходит из за того что в начале номеров было три к примеру, а при переходе к новому оператору их становится два и React по видимому ищет html код третьего номера и неможет его найти, так как при новом rendering-е этот элемент не был создан.
Не смотря на эту ошибку, все работает правильно, видимо при ещё одном рендеринге, React понимает что состояние обновилось и перерисовывает виртуальный DOM.
Если у всех операторов, одинаковое количество телефонов, то ошибки не возникает ВООБЩЕ...
Каким образом возможно исправить данную ошибку, может кто нибудь встречался с этим... Поразительно что при переходе на новый Route, React не понимает того, что виртуальный DOM был изменен, однако он сам же его и менят (((
Буду очень признателен если кто нибудь поможет мне решить данную проблему.
Средний
