如何在react-hook-form中移除值数组选中项并解决splice相关报错

这个错误是两个问题共同导致的：

1. Material UI的ToggleButtonGroup开启多选模式后，当用户取消最后一个选中项时，组件返回的更新值为null，而非空数组。react-hook-form接收到null后会将对应字段覆盖为null，后续表单框架尝试对字段值执行splice等数组操作时就会触发类型错误。
2. 你当前的代码混用了Controller和register，且对日期字段的注册逻辑错误：你在循环每个日期时给每个日期单独注册了test[${index}].day[${i}]字段，而非将所有选中的日期统一存储在test[${index}].day同一个数组字段中。

你需要调整字段绑定逻辑，同时对ToggleButtonGroup的返回值做兜底处理：

• 移除Controller上的register调用，Controller本身会接管字段状态，二者混用会导致状态冲突
• 给ToggleButtonGroup添加multiple属性开启多选
• 自定义onChange逻辑，将组件返回的null值兜底为空数组
• 在useForm初始化时给对应字段设置初始值为空数组

修复后代码示例 #

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
// 引入你自定义的StyledToggleButtonGroup、StyledToggle和DAYS常量

function Sample({ index }) { // 这里的index是你外层循环的参数，需要传入
  const { control, handleSubmit } = useForm({
    defaultValues: {
      // 初始化对应字段为空数组
      [`test[${index}].day`]: []
    }
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>    
      <div>
        <Controller
          control={control}
          name={`test[${index}].day`}
          render={({ field: { onChange, value } }) => (
            <StyledToggleButtonGroup
              size="small"
              multiple
              value={value}
              onChange={(_, newValue) => {
                // 兜底null为数组
                onChange(newValue ?? []);
              }}
            >
              {DAYS.map((day, i) => (
                <StyledToggle key={day.key} value={day.key} aria-label={day.key}>
                  {day.label}
                </StyledToggle>
              ))}
            </StyledToggleButtonGroup>
          )}
        />
      </div>
    </form>
  );
}
export default Sample;

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