Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Description

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /