React Hook Form结合MUI Chips多选时axios提交空数组问题解决

你当前数据链路不通的核心原因有两个：

• register是为原生表单控件设计的，用来绑定原生input/select/textarea的ref、监听原生change事件。MUI Chip本质是div渲染的自定义组件，没有原生表单控件的行为，给Chip绑定ref完全无法让RHF感知到它的状态变化。
• 你目前在组件内部自维护的checked数组，和RHF托管的表单状态是完全隔离的。就算控制台能打印到checked的有效数据，RHF也根本不知道这个值的存在，表单数据里的stock_list自然永远是初始的空数组。

正确实现流程 #

• 1. 初始化表单时给stock_list配置空数组的默认值

  const { control, handleSubmit, setValue } = useForm({
    defaultValues: {
      stock_list: []
    }
  })
  

• 2. 用Controller包裹Chip列表的容器，不要用register绑定Chip，直接接收Controller传递的field对象作为交互的数据源

  <Controller
    name="stock_list"
    control={control}
    render={({ field }) => {
      // field.value 是RHF当前存储的选中列表
      // field.onChange 是用来更新RHF状态的方法
      return (
        <Paper>
          {allStockOptions.map(chip => (
            <Chip
              key={chip.value}
              label={chip.label}
              onClick={() => handleChipToggle(chip.value, field)}
              // 基于field.value判断选中态，不要依赖自维护的checked数组
              color={field.value?.includes(chip.value) ? 'primary' : 'default'}
            />
          ))}
        </Paper>
      )
    }}
  />
  

• 3. 实现Chip的点击切换逻辑，点击后把最新的选中数组通过field.onChange同步给RHF

  const handleChipToggle = (chipValue, field) => {
    const currentSelected = field.value || [];
    // 已选中就移除，未选中就追加
    const nextSelected = currentSelected.includes(chipValue)
      ? currentSelected.filter(item => item !== chipValue)
      : [...currentSelected, chipValue];
    // 这步是打通数据链路的核心：把更新后的列表传给RHF
    field.onChange(nextSelected)
  }
  

• 4. 提交逻辑调整：handleSubmit包裹的onSubmit回调拿到的表单数据里，stock_list就是最新的选中数组，直接传给axios的PATCH请求即可

  const onSubmit = async (formData) => {
    // formData.stock_list 为有效选中数组，直接随请求提交即可
    await axiosInstance.patch('/your/api/path', {
      stock_list: formData.stock_list
    })
  }
  

特殊场景处理 #

如果业务逻辑要求必须在组件内部单独维护选中状态数组做交互判断，在数组更新的时机，一定要手动调用RHF的setValue方法把最新值同步给表单状态，不能让内部状态和RHF状态脱节：

const [checked, setChecked] = useState([])
// 内部更新选中列表的方法
const toggleChip = (chipValue) => {
  setChecked(prev => {
    const next = prev.includes(chipValue)
      ? prev.filter(item => item !== chipValue)
      : [...prev, chipValue]
    // 同步给RHF状态
    setValue('stock_list', next, { shouldDirty: true })
    return next
  })
}

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