fix: Progress type="circle" error

`Rendered more hooks than during the previous render` close #30685
ant-design · Jun 4, 2021 · b818d4a · b818d4a
1 parent 618dc62
commit b818d4a
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 18 deletions.
diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx
@@ -12,26 +12,13 @@ interface CircleProps extends ProgressProps {
 }
 
 function getPercentage({ percent, success, successPercent }: CircleProps) {
-  const ptg = validProgress(percent);
   const realSuccessPercent = getSuccessPercent({ success, successPercent });
-  if (!realSuccessPercent) {
-    return ptg;
-  }
   return [
     validProgress(realSuccessPercent),
-    validProgress(ptg - validProgress(realSuccessPercent)),
+    validProgress(validProgress(percent) - realSuccessPercent),
   ];
 }
 
-function getStrokeColor({ success, strokeColor, successPercent }: CircleProps) {
-  const color = strokeColor || null;
-  const realSuccessPercent = getSuccessPercent({ success, successPercent });
-  if (!realSuccessPercent) {
-    return color;
-  }
-  return [presetPrimaryColors.green, color];
-}
-
 const Circle: React.FC<CircleProps> = props => {
   const {
     prefixCls,
@@ -65,7 +52,7 @@ const Circle: React.FC<CircleProps> = props => {
   };
 
   // using className to style stroke color
-  const strokeColor = getStrokeColor(props) as string | string[] | object;
+  const strokeColor = [presetPrimaryColors.green, props.strokeColor || null];
   const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
 
   const wrapperClassName = classNames(`${prefixCls}-inner`, {

diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
@@ -99,7 +99,7 @@ const Line: React.FC<LineProps> = props => {
   const successPercent = getSuccessPercent(props);
 
   const successPercentStyle = {
-    width: `${validProgress(successPercent)}%`,
+    width: `${successPercent}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
     borderRadius: strokeLinecap === 'square' ? 0 : '',
     backgroundColor: success?.strokeColor,

diff --git a/components/progress/__tests__/index.test.js b/components/progress/__tests__/index.test.js
@@ -204,4 +204,14 @@ describe('Progress', () => {
       'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.',
     );
   });
+
+  // https://github.com/ant-design/ant-design/issues/30685
+  describe('github issues', () => {
+    it('"Rendered more hooks than during the previous render"', () => {
+      expect(() => {
+        const wrapper = mount(<Progress percent={60} success={{ percent: 0 }} type="circle" />);
+        wrapper.setProps({ success: { percent: 10 } });
+      }).not.toThrow();
+    });
+  });
 });
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
@@ -89,7 +89,7 @@ export default class Progress extends React.Component<ProgressProps> {
     const textFormatter = format || (percentNumber => `${percentNumber}%`);
     const isLineType = type === 'line';
     if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
-      text = textFormatter(validProgress(percent), validProgress(successPercent));
+      text = textFormatter(validProgress(percent), successPercent);
     } else if (progressStatus === 'exception') {
       text = isLineType ? <CloseCircleFilled /> : <CloseOutlined />;
     } else if (progressStatus === 'success') {

diff --git a/components/progress/utils.ts b/components/progress/utils.ts
@@ -33,5 +33,5 @@ export function getSuccessPercent({
   if (success && 'percent' in success) {
     percent = success.percent;
   }
-  return percent;
+  return validProgress(percent);
 }