Просмотр исходного кода

fix: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Shun Miyazawa 3 лет назад
Родитель
Сommit
d467d93c02
1 измененных файлов с 18 добавлено и 15 удалено
  1. 18 15
      packages/app/src/components/Page/RevisionLoader.tsx

+ 18 - 15
packages/app/src/components/Page/RevisionLoader.tsx

@@ -37,10 +37,10 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
     rendererOptions, pageId, revisionId, lazy, onRevisionLoaded,
     rendererOptions, pageId, revisionId, lazy, onRevisionLoaded,
   } = props;
   } = props;
 
 
-  const [isLoading, setIsLoading] = useState<boolean>();
-  const [isLoaded, setIsLoaded] = useState<boolean>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
   const [markdown, setMarkdown] = useState<string>('');
   const [markdown, setMarkdown] = useState<string>('');
-  const [errors, setErrors] = useState<any | null>();
+  const [errors, setErrors] = useState<any | null>(null);
 
 
   const loadData = useCallback(async() => {
   const loadData = useCallback(async() => {
     if (!isLoaded && !isLoading) {
     if (!isLoaded && !isLoading) {
@@ -81,6 +81,21 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
     return;
     return;
   };
   };
 
 
+  useEffect(() => {
+    if (errors == null) return;
+
+    const isForbidden = errors != null && errors[0].code === 'forbidden-page';
+    if (isForbidden) {
+      setMarkdown(`<i class="icon-exclamation p-1"></i>${t('not_allowed_to_see_this_page')}`);
+    }
+    else {
+      const errorMessages = errors.map((error) => {
+        return `<i class="icon-exclamation p-1"></i><span class="text-muted"><em>${error.message}</em></span>`;
+      });
+      setMarkdown(errorMessages.join('\n'));
+    }
+  }, [errors, t]);
+
   /* ----- before load ----- */
   /* ----- before load ----- */
   if (lazy && !isLoaded) {
   if (lazy && !isLoaded) {
     return (
     return (
@@ -99,18 +114,6 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
     );
     );
   }
   }
 
 
-  /* ----- after load ----- */
-  const isForbidden = errors != null && errors[0].code === 'forbidden-page';
-  if (isForbidden) {
-    setMarkdown(`<i class="icon-exclamation p-1"></i>${t('not_allowed_to_see_this_page')}`);
-  }
-  else if (errors != null) {
-    const errorMessages = errors.map((error) => {
-      return `<i class="icon-exclamation p-1"></i><span class="text-muted"><em>${error.message}</em></span>`;
-    });
-    setMarkdown(errorMessages.join('\n'));
-  }
-
   return (
   return (
     <RevisionLoaderRoot>
     <RevisionLoaderRoot>
       <RevisionRenderer
       <RevisionRenderer