javascript - 如何使用 redux-form onChange 从商店获取更新的值？

Question

使用 Redux-form 8.2.2，我想在 FieldArray 中更新金额字段时更新总字段。我的函数在 FieldArray 上循环并对金额值求和，我通过或通过. 但在这两种情况下，值都包含 before ，而不是 after 。我由 FieldArray 调用的组件如下所示：updateTotal()getFormValues()formValueSelectoronChangeonChange

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被解雇时直接从商店获取更新的值。

标签： javascriptreactjsreduxreact-reduxredux-form