Estoy trabajando en un proyecto nextjs.
Yo uso useform reactjs.
Traté de salvar uno de un campo de vigilancia en un estado
Recibí este error en la terminal.
estado areaCodeindefinido indefinido watchAllFields indefinido indefinido
error - Error: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.
Probé con estos códigos
const { handleSubmit, control, register, watch, getValues, reset, formState: { isSubmitting }, } = useForm<IPassengerForm>({ defaultValues: { adultPassenger: [], childPassenger: [], infantPassenger: [], }, resolver: yupResolver(passengerSchema), mode: 'all', }); const watchAllFields = watch(); console.log('watchAllFields', watchAllFields.adultPassenger[0]?.areaCode); const getAreaCode = getValues(`adultPassenger.0.areaCode`); console.log(getAreaCode); if (watchAllFields.adultPassenger) { setareaCode(String(watchAllFields.adultPassenger[0]?.areaCode)); } <Controller control={control} // @ts-ignore name={`adultPassenger.${number}.areaCode`} render={({ field, fieldState: { error, invalid }, }) => ( <TextField fullWidth helperText={error?.message} error={invalid} id="outlined-basic" label="Area Code" variant="outlined" {...field} {...register( `adultPassenger.${number}.areaCode` )} /> )} />¿Por qué ocurre este error? ¿Alguien me explica?
Usted llama a setareaCode (supongo que es un enlace de useState) en el renderizado y provoca una nueva renderización, luego setareaCode cambia nuevamente y la renderización vuelve a ocurrir, etc. Como resultado, obtendría un bucle infinito. Para solucionarlo, trate de evitar llamar a funciones que causen re-renderizaciones. En lugar de esto, mueva esta lógica para useEffect ganchos de efecto o devoluciones de llamada.