React中Formik动态数组字段的计算字段实现求助

需求说明 #

已实现Formik静态字段的计算功能，现在需要对动态数组字段persons（支持新增/删除数组对象）计算所有对象的income总和。

可行实现代码 #

import { useFormikContext, useField } from 'formik';
import { useEffect } from 'react';

const TotalIncomeField = (props) => {
  const { values: { persons }, setFieldValue } = useFormikContext();
  const [field, meta] = useField(props);

  useEffect(() => {
    // 计算所有persons的income总和
    const totalIncome = persons.reduce((sum, person) => {
      const income = parseFloat(person.income);
      // 处理undefined、空字符串或非数字的情况
      return sum + (isNaN(income) ? 0 : income);
    }, 0);

    setFieldValue(props.name, totalIncome);
  }, [persons, setFieldValue, props.name]); // 监听persons数组变化，包括新增、删除、income修改

  return (
    <>
      <input
        name={props.name}
        value={field.value}
        readOnly // 计算字段设为只读，避免用户手动修改
      />
      {!!meta.touched && !!meta.error && <div className="error">{meta.error}</div>}
    </>
  );
};

export default TotalIncomeField;

关键说明 #

• 正确获取数组数据：直接从useFormikContext的values中解构出persons数组，你之前的两种策略错误地将数组当作对象进行嵌套解构，无法正确获取动态数组的全部数据。
• 数组变化监听：将persons作为useEffect的依赖项，由于Formik的values是不可变对象，数组新增、删除元素或内部income值修改时，persons都会生成新的引用，自动触发计算逻辑。
• 安全数值计算：使用reduce遍历数组累加，通过parseFloat转换数值，并通过isNaN过滤无效值，避免出现计算错误。
• 只读处理：计算字段建议设置为readOnly，防止用户手动修改破坏自动计算逻辑。

使用示例 #

在Formik表单中引入该组件，指定目标计算字段名（比如totalIncome）：

<Formik
  initialValues={{
    persons: [
      { personName: "", income: 0 },
      { personName: "", income: 0 }
    ],
    totalIncome: 0
  }}
  onSubmit={(values) => console.log(values)}
>
  {() => (
    <Form>
      {/* 此处放置persons数组的新增/删除、输入组件 */}
      <TotalIncomeField name="totalIncome" />
      <button type="submit">提交</button>
    </Form>
  )}
</Formik>

内容的提问来源于stack exchange，提问作者Nick