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

Cannot update a component (HotReload) while rendering a different component (CSSMotion). To locate the bad setState() call inside CSSMotion, follow the stack trace as described in https://react.dev/link/setstate-in-render

Aperta
#56 4 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
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia individuando il codice sorgente corrispondente a node_modules/rc-motion/es/CSSMotion.js e riproduci l’avviso di React durante il rendering. Confronta la patch segnalata con il codice sorgente del progetto e verifica che l’avviso non si verifichi più; il payload non indica alcun file di test, quindi individua i test Motion esistenti pertinenti prima di apportare modifiche.

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

Descrizione

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch rc-motion@2.9.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/rc-motion/es/CSSMotion.js b/node_modules/rc-motion/es/CSSMotion.js
index c75a051..364992e 100644
--- a/node_modules/rc-motion/es/CSSMotion.js
+++ b/node_modules/rc-motion/es/CSSMotion.js
@@ -56,6 +56,7 @@ export function genCSSMotion(config) {
         return null;
       }
     }
+
     var _useStatus = useStatus(supportMotion, visible, getDomElement, props),
       _useStatus2 = _slicedToArray(_useStatus, 4),
       status = _useStatus2[0],
@@ -120,14 +121,21 @@ export function genCSSMotion(config) {
 
     // Auto inject ref if child node not have `ref` props
     if ( /*#__PURE__*/React.isValidElement(motionChildren) && supportRef(motionChildren)) {
-      var _ref = motionChildren,
-        originNodeRef = _ref.ref;
-      if (!originNodeRef) {
-        motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
-          ref: setNodeRef
-        });
-      }
+      const originNodeRef = motionChildren.ref;
+
+      motionChildren = React.cloneElement(motionChildren, {
+        ref: (node) => {
+          // Assign the ref in a callback function to avoid modifying state during render
+          setNodeRef(node);
+          if (typeof originNodeRef === 'function') {
+            originNodeRef(node);
+          } else if (originNodeRef) {
+            originNodeRef.current = node;
+          }
+        },
+      });
     }
+
     return /*#__PURE__*/React.createElement(DomWrapper, {
       ref: wrapperNodeRef
     }, motionChildren);

This issue body was partially generated by patch-package.

Lingua principale
TypeScript
Stelle
178
Fork
51
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-component/motion

Tutte le issue di react-component/motion

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.