React Final Form从API填充输入值且支持用户自定义覆盖的实现问题

问题根源 #

你当前的实现问题出在TextBox组件的渲染逻辑里：你直接在Field的渲染回调中写了{value1 && input.onChange(value1)}，这会导致每次组件渲染只要value1有值，就会强制覆盖输入框的当前值，用户手动输入的内容只要触发组件重渲染就会被冲掉，自然无法实现自定义修改。

解决方案 #

核心逻辑是只在API返回的value1发生变化时，才同步更新表单字段值，不要每次渲染都执行赋值操作，用useEffect监听value1的变更即可：

修改后的TextBox.jsx代码 #

import { Field } from 'react-final-form';
import { useEffect } from 'react';

export interface IInput {
  name: string;
  value1?: string | null;
}

function TextBox({ name, value1 }: IInput) {
  return (
    <Field name={name}>
      {({ input }) => {
        // 仅在value1发生变化时同步更新表单值
        useEffect(() => {
          // 不需要非空判断的话可以删掉，直接input.onChange(value1 ?? '')即可支持返回空值时清空输入框
          if (value1 !== undefined && value1 !== input.value) {
            input.onChange(value1);
          }
        }, [value1, input]);

        return (
          <input
            name={input.name}
            value={input.value ?? ''}
            onChange={input.onChange}
          />
        );
      }}
    </Field>
  );
}

export { TextBox };

逻辑说明 #

• 只有当value1（API返回值）发生变更时，才会触发表单字段的更新，不会干涉用户后续的手动输入操作
• 当API再次调用返回新值时，value1变化会自动触发useEffect，替换当前输入框的值
• 如果需要支持API返回空值时清空输入框，直接调整useEffect里的判断逻辑即可
• 父组件原有逻辑不需要修改，只要保证API返回新值时更新传递给value1的prop即可

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