Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Multi step form or conditional rendering with DevTool console get an error Cannot update a component (`FormItemTest`) while rendering a different component (`FormItemTest`). To locate the bad setState() call inside `FormItemTest`

Aperta
#226 0 commenti 3 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
42/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
devtools

Direzione di ricerca

Start with the provided Demo reproduction using FormProvider, conditional Step2 rendering, getStep(step), and . Reproduce the warning with DevTool enabled, then inspect the DevTool component and its control subscription or rendering path. Done means the multi-step example no longer reports the setState-during-render warning while DevTool remains enabled.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

The collection of fields in react hook form meets expectations. Confirmed to be a bug in DevTool. when I annotate DevTool,no more errors reported.

this is example code

import {
  useForm,
  FormProvider
} from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { DevTool } from '@hookform/devtools';

import FormItemTest from '~/components/form/FormItemTest';

import {
  useState
} from 'react';

import * as z from 'zod';

const schema = z.object({
  step1: z.string(),
  step2: z.string()
});

function Step1() {
  return (
    <FormItemTest name='step1' />
  )
}

function Step2() {
  return (
    <FormItemTest name='step2' />
  )
}

function getStep(step: number) {
  switch (step) {
    case 0:
      return <Step1 />;
    case 1:
      return <Step2 />;
    default:
      return null;
  }
}

export default function Demo() {
  const [show, setShow] = useState(false);
  const [step, setStep] = useState(0);

  const methods = useForm({
    resolver: zodResolver(schema),
    mode: 'onChange'
  });

  const onSubmit = methods.handleSubmit(values => {
    console.log(values);
  });

  return (
    <div>
      <FormProvider {...methods}>
        <form>
          <Step1 />
          {show && <Step2 />}
          {getStep(step)}
        </form>
      </FormProvider>
      <DevTool control={methods.control} />
      <button onClick={() => setShow(s => !s)}>Toggle Step2</button>
      <button onClick={onSubmit}>Submit</button>
      <button onClick={() => setStep(s => s + 1)}>Next Step</button>
    </div>
  )
}
Image
Lingua principale
TypeScript
Stelle
670
Fork
55
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-hook-form/devtools

Tutte le issue di react-hook-form/devtools

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.