使用React Hook Form时MUI Select的setValue方法失效问题

问题根源 #

• 自定义useState的setValue和React Hook Form的setValue重名，导致调用逻辑混乱
• 多选Select的初始值要求是数组类型，你传的单个字符串'apple'不匹配类型，且大小写和选项里的Apple不一致
• 同时混用register和自定义的value/onChange，相当于同时启用受控和非受控逻辑，状态同步必然出错

修正后的完整代码 #

import { useForm, Controller } from 'react-hook-form';
import { Select, MenuItem } from '@mui/material';
import { useEffect } from 'react';

const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Grape', value: 'Grape' }
];

const FruitSelect = () => {
  // 初始化表单，默认值设为空数组
  const { control, setValue } = useForm({
    defaultValues: {
      fruits: []
    }
  });

  // 页面加载时设置初始值
  useEffect(() => {
    // 多选必须传数组，注意和选项value大小写严格匹配
    setValue('fruits', ['Apple']);
  }, [setValue]);

  return (
    <Controller
      name="fruits"
      control={control}
      render={({ field: { onChange, value } }) => (
        <Select
          multiple
          value={value}
          onChange={onChange}
          fullWidth
        >
          {options.map((option, index) => (
            <MenuItem key={index} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      )}
    />
  );
};

export default FruitSelect;

核心修正点 #

1. 移除自定义state：删掉自己定义的useState，完全交给React Hook Form的Controller和setValue管理状态，彻底避免重名和状态冲突
2. 初始值用数组：多选组件的值类型固定为数组，哪怕只选一个选项也要传['Apple']，且要和选项中的value大小写完全一致
3. 用Controller对接MUI组件：MUI的Select是受控组件，必须通过Controller和React Hook Form对接，不能直接用register，这样才能保证表单状态和组件值完全同步
4. 外部更新直接调用RHF的setValue：如果需要手动修改选中值，直接用React Hook Form提供的setValue即可，示例：

// 手动更新选中项示例
const handleManualUpdate = () => {
  setValue('fruits', ['Grape']);
};

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