Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #56

Open
EhsanBeheshtAein opened this issue Nov 1, 2024 · 4 comments

Comments

@EhsanBeheshtAein
Copy link

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] 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.

@infodusha
Copy link

While I have the same issue, unfortunately the patch didn't help

@Damon4
Copy link

Damon4 commented Dec 5, 2024

worked for me, nextjs^15, react^19

diff --git a/node_modules/rc-motion/es/CSSMotion.js b/node_modules/rc-motion/es/CSSMotion.js
index c75a051..9448988 100644
--- a/node_modules/rc-motion/es/CSSMotion.js
+++ b/node_modules/rc-motion/es/CSSMotion.js
@@ -121,7 +121,7 @@ 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;
+          originNodeRef = _ref.props.ref || _ref.ref;
       if (!originNodeRef) {
         motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
           ref: setNodeRef
diff --git a/node_modules/rc-motion/lib/CSSMotion.js b/node_modules/rc-motion/lib/CSSMotion.js
index 48765dd..74e4b85 100644
--- a/node_modules/rc-motion/lib/CSSMotion.js
+++ b/node_modules/rc-motion/lib/CSSMotion.js
@@ -133,7 +133,7 @@ function genCSSMotion(config) {
     // Auto inject ref if child node not have `ref` props
     if ( /*#__PURE__*/React.isValidElement(motionChildren) && (0, _ref2.supportRef)(motionChildren)) {
       var _ref = motionChildren,
-        originNodeRef = _ref.ref;
+          originNodeRef = _ref.props.ref || _ref.ref;
       if (!originNodeRef) {
         motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
           ref: setNodeRef

@afc163
Copy link
Member

afc163 commented Dec 5, 2024

@zombieJ

@afc163
Copy link
Member

afc163 commented Dec 6, 2024

图片

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants