material-ui autocomplete wrapped into react-hook-form Controller, can't get the value

Question

我无法在 onSubmit 函数中获取包装到 react-hook-form <Controller /> 中的字段的值。什么东西少了？ 另一个字段工作正常

    const onSubmit = async (data,e) => {
           console.log("DATA" , data) 
           //data.groups is always undefined

           ...
    }  
    
    
    
      <form onSubmit={handleSubmit(onSubmit)}>
        
            <Controller 
                name="groups"

                control={control}
                as={() => (
                    <Autocomplete multiple options={fbGroupsData.Group} getOptionLabel={option => option.name}  renderInput={(params) =>(<TextField {...params}  variant="outlined" label="Groups" placeholder="Groups" />)}/>
                )}
            />

            <TextField fullWidth  inputRef={register} InputLabelProps={{ shrink: true }}  name="name"  label="Name" variant="outlined" />
    
         </form>

Answer 1

文档中有一个示例：https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r 建议使用 render prop 而不是 as:

    <Controller
      render={(props) => (
        <Autocomplete
          {...props}
          options={countries}
          getOptionLabel={(option) => option.label}
          renderOption={(option) => (
            <span>
              {countryToFlag(option.code)}
              {option.label}
            </span>
          )}
          renderInput={(params) => (
            <TextField
              {...params}
              label="Choose a country"
              variant="outlined"
            />
          )}
          onChange={(_, data) => props.onChange(data)}
        />
      )}
      name="country"
      control={control}
    />