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

useWatch支持dynamic path

Aperta
#746 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

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

Direzione di ricerca

Inizia dall’implementazione di useWatch e analizza l’effetto mostrato nell’issue, concentrandoti sulla gestione dinamica di selector e namePath. Riproduci entrambi i casi e traccia il modo in cui dependencies e refs influenzano gli aggiornamenti. Il lavoro è completato quando selector e percorsi dinamici si aggiornano correttamente senza l’avviso attuale né il comportamento con selector obsoleto.

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

Descrizione

为什么不支持watch动态的路径呢？事实上我传一个动态的namePath，它似乎也能正常工作，只是代码里写了让它warnning。但如果我传了一个动态的selector，它不起效，selector会保持不变，我想是否因为这里effect没有依赖dependencies（when type is func）。所以为什么不加上这个依赖呢？然后不用ref来接受namePath，将namePath也放入依赖中，似乎这样就支持动态路径，而不必报错了。

// in useWatch
  useEffect(
    () => {
      // Skip if not exist form instance
      if (!isValidForm) {
        return;
      }

      const { getFieldsValue, getInternalHooks } = formInstance;
      const { registerWatch } = getInternalHooks(HOOK_MARK);

      const getWatchValue = (values: any, allValues: any) => {
        const watchValue = options.preserve ? allValues : values;
        return typeof dependencies === 'function'
          ? dependencies(watchValue)
          : getValue(watchValue, namePathRef.current);
      };

      const cancelRegister = registerWatch((values, allValues) => {
        const newValue = getWatchValue(values, allValues);
        const nextValueStr = stringify(newValue);

        // Compare stringify in case it's nest object
        if (valueStrRef.current !== nextValueStr) {
          valueStrRef.current = nextValueStr;
          setValue(newValue);
        }
      });

      // TODO: We can improve this perf in future
      const initialValue = getWatchValue(getFieldsValue(), getFieldsValue(true));

      // React 18 has the bug that will queue update twice even the value is not changed
      // ref: https://github.com/facebook/react/issues/27213
      if (value !== initialValue) {
        setValue(initialValue);
      }

      return cancelRegister;
    },

    // We do not need re-register since namePath content is the same
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [isValidForm],
  );
Lingua principale
TypeScript
Stelle
1k
Fork
286
Merge medio
4g 16h
PR unite (30g)
1

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-component/field-form

Tutte le issue di react-component/field-form

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.