使用Redux格式8.2.2,每当在FieldArray中更新 amount 字段时,我都希望更新 total 字段。
我的className={`${styles.LNLink} ${props.className`}
函数在FieldArray上循环并求和一些值,这些值是我通过updateTotal()
或通过getFormValues()
获取的。但是在两种情况下,值都包含formValueSelector
之前的值,而不是onChange
之后的值。
我的FieldArray调用的组件如下所示:
onChange
使用此代码,当forEach到达索引时,它将获取先前的tpp [index] .amount值,而不是更新的值。
暂时,我正在使用以下解决方法:
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);
代替
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()
被解雇后直接从商店获取更新的值。