Nextjs NextUi 带有 React hook 表单的多重选择

Question

我在使用 React Hook Form 实现 NextUI 的多重选择组件时遇到问题。我正在显示配置文件数据并使用数据中选定的值填充选择框。现在我收到如下打字稿错误。

键入 '{ 子项：（项目：选项）=> 元素； onChange: (...事件: 任何[]) => void; onBlur：Noop；值：配置文件组[]；禁用？：布尔值|不明确的; ... 7 个以上 ...;选定的键：字符串[]； }' 不可分配给类型“Props”。 属性“值”的类型不兼容。 类型“ProfileGroup[]”不可分配给类型“string |”数量 |只读字符串[] |不明确的'。 类型“ProfileGroup[]”不可分配给类型“readonly string[]”。 类型“ProfileGroup”不可分配给类型“string”。

这是我的国家组选项

export const countryGroupOptions: Option<string>[] = [
  { value: 'US 1', label: 'US 1' },
  { value: 'US 2', label: 'US 2' },
  { value: 'US 3', label: 'US 3' },
  { value: 'Reserve', label: 'Reserve' },
]

以及一些与我的组件问题相关的代码

const ProfileDetails: React.FC<ProfileDetailProps> = ({ profileId }) => {
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    reset,
    control,
    formState: { errors }
  } = useForm<Profile>({
    defaultValues: profile
  })
  const [countries, setCountries] = useState<string[]>([])

  const onGroupChanged = (groups: string[]) => {
    const profileGroups: ProfileGroup[] = []

    forEach(groups, (item: string) => {
      const [countryCode, groupName] = item.split(" ")

      profileGroups.push({
        profile_id: profile?.id,
        country_code: countryCode,
        group: groupName
      })
    })

    setValue("groups", profileGroups)
    setCountries(groups)
  }

  useEffect(() => {
    if (profile) {
      reset(profile)
      setCountries(profile.formattedGroups ?? [])
    }
  }, [profile, reset, setValue])

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="groups"
          control={control}
          rules={{ required: "Country group is required" }}
          render={({ field }) => (
            <Select
              items={countryGroupOptions}
              label="Country"
              labelPlacement="outside"
              placeholder="Select"
              selectionMode="multiple"
              selectedKeys={countries}
              onChange={onGroupChanged}
              {...field}
            >
              {(item) => <SelectItem key={item.value}>{item.label}</SelectItem>}
            </Select>
          )}
        ></Controller>
      </form>
    </div>
  )
}

我一直在寻找如何实现这项工作的方法，但没有成功。

我试过了，但还是不行

<Controller
  name="groups"
  control={control}
  render={({ field }) => (
    <Select
      items={countryGroupOptions}
      label="Country"
      labelPlacement="outside"
      placeholder="Select"
      selectionMode="multiple"
      selectedKeys={field.value?.map((group: ProfileGroup) => `${group.country_code} ${group.group}`) ?? []}
      onSelectionChange={() => onGroupChanged(field)}
      {...field}
    >
      {(item) => (
        <SelectItem key={item.value}>
          {item.label}
        </SelectItem>
      )}
    </Select>
  )}
/>

Answer 1

好的，这是我遇到的问题的解决方案。将在此发布此内容以帮助其他人。

所以我所做的就是传递由 Select 组件的 onChange 属性触发的事件，并在 onGroupChanged 函数上处理它。

const onGroupChanged = (event: any) => {
  const value = event.target.value.trim()
  if (!value) return

  const groups = value.split(',')
  const profileGroups: ProfileGroup[] = groups.map((item: string) => {
    const [countryCode, groupName] = item.split(' ')
    return {
      profile_id: profile?.id,
      country_code: countryCode,
      group: groupName,
    }
  })

  setValue('groups', profileGroups)
  setCountries(groups)
}


<Controller
  name="groups"
  control={control}
  rules={{ required: 'Country group is required' }}
  render={({ field: { onChange, value } }) => {
    return (
      <Select
        items={countryGroupOptions}
        label="Country"
        labelPlacement="outside"
        placeholder="Select"
        selectionMode="multiple"
        selectedKeys={countries}
        onChange={(e) => {
          onGroupChanged(e)
        }}
      >
        {(item) => (
          <SelectItem key={item.value}>
            {item.label}
          </SelectItem>
        )}
      </Select>
    )
  }}
></Controller>