Блог

Я не могу получить значение поля react-hook-form <Controller /> , завернутое в функцию onSubmit. Чего не хватает? другое поле работает правильно

     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>
 

В документе есть пример: 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}
    />