Используя Redux-форму 8.2.2, я хочу обновлять поле total всякий раз, когда amount поля обновляются в FieldArray. Моя функция updateTotal()
зацикливается на FieldArray и суммирует значения сумм, которые я получаю через getFormValues()
или через formValueSelector
. Но в обоих случаях значения содержат значение до onChange
, а не после onChange
. Мой компонент, вызываемый FieldArray, выглядит следующим образом:
import React from "react";
import { connect } from "react-redux";
import { Field, getFormValues, change } from "redux-form";
const RenderTPP = props => {
const { fields, dispatch, values } = props;
const updateTotal = index => {
let tppTotal = 0;
values.tpp.forEach((item, i) => {
tppTotal += parseFloat(item.amount);
});
dispatch(change("myForm", "total", tppTotal));
};
return (
<tr>
<td>
{fields.map((tpp, index) => (
<div key={index}>
<Field
name={`tpp[${index}].amount`}
component="input"
type="text"
onChange={() => updateTotal(index)}
/>
</div>
))}
</td>
<td>
<Field name="total" component="input" type="text" />
</td>
</tr>
);
};
export default connect(state => ({
values: getFormValues("myForm")(state)
}))(RenderTPP);
С этим кодом, когда forEach достигает индекса, он получает предыдущее значение tpp [index] .amount вместо обновленного.
Временно я использую следующий обходной путь:
onChange={(event, newValue) => updateTotal(index, newValue)}
вместо
onChange={() => updateTotal(index)}
и
const updateTotal = (index, value) => {
let tppTotal = parseFloat(value);
values.tpp.forEach((item, i) => {
if (i != index)
tppTotal += parseFloat(item.amount);
});
dispatch(change("caseDataForm", "total", tppTotal));
};
для функции updateTotal()
. Этот обходной путь, кажется, делает работу, но он не адаптирован к моей ситуации, так как я хотел бы позвонить updateTotal()
из других частей моего приложения. И даже если это сработает, я бы предпочел получить обновленное значение непосредственно из магазина при срабатывании onChange
.