Ниже мое требование:
Здесь, как и в «страховке», есть разные типы блоков, и в каждый блок можно добавить любое количество записей. При добавлении каждой строки я обновляю общую сумму до «заголовка таблицы», а сумму всех заголовков таблицы до «Общие инвестиции».
Мои компоненты такие.
File1 . js (Главный компонент)
render:
<TotalInvestment amountMap={this.state.totalAmounts}/>
<TableComponent finalTotalAmount={_self._getFinalTotalAmount}/>
_getFinalTotalAmount = (type, amount) => {
if((!this.state.totalAmounts.get(type) && this.state.totalAmounts.get(type) != 0) ||
this.state.totalAmounts.get(type) !== amount) {
this.setState(() => ({totalAmounts: this.state.totalAmounts.set(type, amount)}));
}
}
Файл2. js (Компонент таблицы)
render: <div class="table-head"> <span id="amount"> Total: {this.state.totalAmt}/- </span></div>
<table class="table">
<thead class="table-bordered">{tableHeader}</thead>
<tbody>{dataRecord}</tbody>
</table>
//It get called when any new row is added.
_getTotalAmount = (amount) => {
var totalAmount = parseFloat(this.state.totalAmt || 0 ) + parseFloat(amount || 0);
var newState = this.state;
newState.totalAmt = totalAmount.toFixed(2);
this.setState(newState);
this.props.finalTotalAmount(this.props.type, this.state.totalAmt);
}
Но когда я пытаюсь обновить компонент «общие инвестиции» до несовместимого состояния. Где я делаю не так? При необходимости могу добавить дополнительную информацию.