React Native Dropdown Picker结合React Hook Form多选提交无值求助

你遇到的核心问题是：多选组件内部能正确获取选中的数组值，但提交表单时，对应字段返回[Function anonymous]而非预期的数组。问题出在DropDownPicker的setValue属性写法上，导致React Hook Form的onChange函数接收到了错误的参数类型。

解决方案 #

修改多选组件中DropDownPicker的setValue配置，去掉箭头函数包裹，直接传递React Hook Form的onChange函数：

原错误写法 #

setValue={item => onChange(item)}

修改后的正确写法 #

setValue={onChange}

原因说明

DropDownPicker在多选模式下，会直接将选中的数组作为参数传递给setValue指定的函数。直接使用onChange可以让它正确接收这个数组值，更新表单字段，避免箭头函数的间接调用导致意外传入函数类型的值。

修改后的完整多选组件代码 #

import {View, StyleSheet} from 'react-native';
import {Controller} from 'react-hook-form';
import DropDownPicker from 'react-native-dropdown-picker';
import {useState} from 'react';

import colors from '../config/colors';
import AppText from './AppText';

const RHFFormMultiSelect = ({
  control,
  name,
  placeholder,
  dropdownList,
  searchable = false,
  rules = {},
  secureTextEntry,
  dropDownDirection = 'TOP',
  min = 1,
  max = 4,
}) => {
  const [listOpen, setListOpen] = useState(false);
  return (
    <View style={{zIndex: -1}}>
      <Controller
        control={control}
        name={name}
        rules={rules}
        render={({field: {value, onChange}, fieldState: {error}}) => {
          console.log(value); // 依然能正确获取选中数组
          return (
            <>
              <DropDownPicker
                style={styles.dropdown}
                placeholder={placeholder}
                placeholderStyle={styles.dropdownPlaceholder}
                multiple={true}
                min={min}
                max={max}
                mode="BADGE"
                open={listOpen}
                setOpen={() => setListOpen(!listOpen)}
                items={dropdownList}
                value={value}
                setValue={onChange} // 此处为修改点
                listMode="SCROLLVIEW"
                dropDownDirection={dropDownDirection}
                searchable={searchable}
                autoScroll
              />
              {error && (
                <AppText style={styles.error}>
                  {error.message || 'Error!'}
                </AppText>
              )}
            </>
          );
        }}
      />
    </View>
  );
};

额外排查点（若修改后仍有问题） #

• 确认React Hook Form和DropDownPicker为最新稳定版本，避免版本兼容性问题
• 检查主页面defaultValues中的language字段确实初始化为数组[]
• 确保没有其他自定义逻辑意外修改了表单字段的值

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