如何结合final-form-calculate与final-form-array处理数组字段赋值？

嘿，我来帮你搞定这个需求！要实现每个参会者的Email输入后自动填充FirstName和Surname，关键是要在final-form-calculate里精准定位数组中的单个项，下面是具体的实现方案：

核心思路 #

final-form-calculate的装饰器可以通过字段匹配规则捕获数组中的Email输入，提取对应的参会者索引，然后触发异步查询，最后更新该索引对应的FirstName和Surname字段。

完整代码实现 #

1. 导入依赖 #

首先确保你已经安装了所需的包：

npm install react-final-form final-form react-final-form-array final-form-calculate

2. 实现表单组件 #

import React from 'react';
import { Form, Field } from 'react-final-form';
import { FieldArray } from 'react-final-form-array';
import { createDecorator } from 'final-form-calculate';

// 模拟网络查询：根据邮箱获取用户信息
const fetchUserByEmail = async (email) => {
  // 这里替换成你的真实API请求
  await new Promise(resolve => setTimeout(resolve, 500));
  return { firstName: 'John', surname: 'Doe' }; // 模拟返回的用户数据
};

// 创建计算装饰器
const calculator = createDecorator([
  {
    // 匹配数组中所有参会者的Email字段，格式如attendees[0].email、attendees[1].email
    match: /^attendees\[(\d+)\].email$/,
    // 处理字段变化的逻辑
    async calculate(value, allValues, prevValues, field) {
      if (!value) return {}; // 如果邮箱为空，不做处理

      // 从匹配的字段名中提取参会者索引
      const index = field.match(/^attendees\[(\d+)\].email$/)[1];
      
      try {
        // 触发网络查询
        const user = await fetchUserByEmail(value);
        
        // 返回要更新的字段：对应索引的firstName和surname
        return {
          [`attendees[${index}].firstName`]: user.firstName,
          [`attendees[${index}].surname`]: user.surname
        };
      } catch (error) {
        console.error('获取用户信息失败:', error);
        return {};
      }
    }
  }
]);

const MyForm = () => {
  const onSubmit = (values) => {
    console.log('表单提交:', values);
  };

  return (
    <Form
      onSubmit={onSubmit}
      decorators={[calculator]} // 应用计算装饰器
      initialValues={{ attendees: [{ email: '', firstName: '', surname: '' }] }}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <h2>参会者列表</h2>
          <FieldArray name="attendees">
            {({ fields }) => (
              <div>
                {fields.map((name, index) => (
                  <div key={name} style={{ margin: '10px 0', padding: '10px', border: '1px solid #eee' }}>
                    <div>
                      <label>参会者 {index + 1} 邮箱:</label>
                      <Field
                        name={`${name}.email`}
                        component="input"
                        type="email"
                        placeholder="输入邮箱"
                      />
                    </div>
                    <div>
                      <label>名字:</label>
                      <Field
                        name={`${name}.firstName`}
                        component="input"
                        type="text"
                        placeholder="自动填充"
                        readOnly // 可选：设置为只读，避免手动修改
                      />
                    </div>
                    <div>
                      <label>姓氏:</label>
                      <Field
                        name={`${name}.surname`}
                        component="input"
                        type="text"
                        placeholder="自动填充"
                        readOnly // 可选：设置为只读，避免手动修改
                      />
                    </div>
                    <button
                      type="button"
                      onClick={() => fields.remove(index)}
                      disabled={fields.length === 1}
                    >
                      删除
                    </button>
                  </div>
                ))}
                <button type="button" onClick={() => fields.push({ email: '', firstName: '', surname: '' })}>
                  添加参会者
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">提交表单</button>
        </form>
      )}
    />
  );
};

export default MyForm;

关键细节说明 #

1. 字段匹配规则：用正则表达式/^attendees\[(\d+)\].email$/匹配所有参会者的Email字段，其中(\d+)捕获索引值，方便后续定位对应的FirstName和Surname。
2. 异步处理：calculate函数支持返回Promise，所以可以直接在里面写异步的网络请求逻辑。
3. 精准更新字段：通过模板字符串拼接出目标字段名attendees[${index}].firstName和attendees[${index}].surname，确保只更新当前输入邮箱的参会者信息。
4. 竞态问题优化（可选）：如果担心快速输入导致的请求竞态，可以添加请求取消逻辑，比如使用AbortController：

   const fetchUserByEmail = async (email, controller) => {
     const response = await fetch(`/api/user?email=${email}`, { signal: controller.signal });
     return response.json();
   };
   // 在calculate函数中：
   const controller = new AbortController();
   // 组件卸载或字段变化时取消之前的请求
   // 可以结合final-form的生命周期处理，这里简化示例
   

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