Material UI Autocomplete与React Final Form的RenderTags及数据存储问题

问题背景 #

使用Material UI Autocomplete组件结合React Final Form时遇到两个问题：

1. 初始代码中renderTags未返回Chip组件，导致标签完全不显示；
2. 修改renderTags修复显示问题后，表单仅存储最后一个选中的标签，无法保存完整的标签数组。

初始代码问题分析 #

• 初始renderTags内的map循环没有返回值，React无法渲染Chip组件；同时在循环内调用setValue，每次迭代都会触发状态更新，且引用比较value !== values.metadata.keywordTags逻辑不可靠，会导致数据同步异常。
• 修改后的代码修复了标签渲染，但未正确处理Autocomplete与React Final Form的状态绑定，handleTagChange未把完整的选中数组同步到表单字段。

解决方案 #

通过React Final Form的<Field>组件接管字段状态管理，实现Autocomplete与表单的双向绑定，确保标签正常显示且完整存储数组：

import { Field } from 'react-final-form';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Chip from '@mui/material/Chip';

// 在表单组件内使用
<Field name="metadata.keywordTags" component={({ input }) => (
  <Autocomplete
    multiple
    id="tags-filled"
    options={tags}
    freeSolo
    value={input.value || []} // 确保初始值为数组，避免undefined报错
    onChange={(_, newValue) => input.onChange(newValue)} // 同步完整选中数组到表单
    renderTags={(value: string[], getTagProps) =>
      value.map((option: string, index: number) => (
        <Chip
          key={index}
          variant="outlined"
          label={option}
          {...getTagProps({ index })}
        />
      ))
    }
    renderInput={(params) => (
      <TextField
        {...params}
        variant="outlined"
        label="Keyword tags (optional)"
      />
    )}
  />
)} />

关键修复点 #

1. 用<Field>组件管理metadata.keywordTags字段，自动处理表单状态的读写，避免手动调用setValue的逻辑错误；
2. Autocomplete的onChange直接将完整的选中数组传递给input.onChange，确保表单存储完整的标签集合；
3. 给Chip组件添加正确的key属性，修复之前的注释拼写错误；
4. 为value设置默认空数组，避免初始值为undefined引发的渲染异常。

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