Fix(#7414): Fix React's bad setState() call warnings

packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -86,7 +86,7 @@ const CardBody = styled.div`
   }
 `;
 
-const CardImage = styled.div`
+const StyledImage = styled.div`
   background-image: url(${props => props.src});
   background-position: center center;
   background-size: cover;
@@ -131,6 +131,16 @@ const WorkflowBadge = styled.span`
   }};
 `;
 
+function CardImage({ getAsset, value, field }) {
+  const [asset, setAsset] = useState(null);
+
+  useEffect(() => {
+    setAsset(value ? getAsset(value, field) : null);
+  }, [value, field, getAsset]);
+
+  return asset ? <StyledImage src={asset.toString()} /> : null;
+}
+
 function EntryCard({
   path,
   summary,
@@ -192,7 +202,7 @@ function EntryCard({
               </TitleIcons>
             </CardHeading>
           </CardBody>
-          {image ? <CardImage src={getAsset(image, imageField).toString()} /> : null}
+          {image ? <CardImage getAsset={getAsset} value={image} field={imageField} /> : null}
         </GridCardLink>
       </GridCard>
     );

packages/decap-cms-widget-file/src/withFileControl.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
@@ -61,8 +61,19 @@ const StyledImage = styled.img`
   object-fit: contain;
 `;
 
-function Image(props) {
-  return <StyledImage role="presentation" {...props} />;
+function Image({ value, field, getAsset }) {
+  const [asset, setAsset] = useState(null);
+
+  useEffect(() => {
+    if (value) {
+      const newAsset = getAsset(value, field);
+      setAsset(newAsset);
+    } else {
+      setAsset(null);
+    }
+  }, [value, field, getAsset]);
+
+  return asset ? <StyledImage role="presentation" src={asset} /> : null;
 }
 
 function SortableImageButtons({ onRemove, onReplace }) {
@@ -89,7 +100,7 @@ function SortableImage(props) {
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <ImageWrapper sortable>
-        <Image src={getAsset(itemValue, field) || ''} />
+        <Image value={itemValue} field={field} getAsset={getAsset} />
       </ImageWrapper>
       <SortableImageButtons
         item={itemValue}
@@ -417,6 +428,7 @@ export default function withFileControl({ forImage } = {}) {
     renderImages = () => {
       const { getAsset, value, field } = this.props;
       const items = valueListToSortableArray(value);
+
       if (isMultiple(value)) {
         return (
           <SortableMultiImageWrapper
@@ -433,10 +445,9 @@ export default function withFileControl({ forImage } = {}) {
         );
       }
 
-      const src = getAsset(value, field);
       return (
         <ImageWrapper>
-          <Image src={src || ''} />
+          <Image value={value} field={field} getAsset={getAsset} />
         </ImageWrapper>
       );
     };

packages/decap-cms-widget-image/src/ImagePreview.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { List } from 'immutable';
@@ -11,13 +11,26 @@ const StyledImage = styled(({ src }) => <img src={src || ''} role="presentation"
 `;
 
 function StyledImageAsset({ getAsset, value, field }) {
-  let src = '';
-  if (value instanceof File) {
-    src = URL.createObjectURL(value);
-  } else {
-    src = getAsset(value, field);
-  }
-  return <StyledImage src={src} />;
+  const [asset, setAsset] = useState(null);
+
+  useEffect(() => {
+    if (!value) {
+      setAsset(null);
+      return;
+    }
+
+    if (typeof File !== 'undefined' && value instanceof File) {
+      const objectUrl = URL.createObjectURL(value);
+      setAsset(objectUrl);
+
+      return () => URL.revokeObjectURL(objectUrl);
+    }
+
+    const newAsset = getAsset(value, field);
+    setAsset(newAsset);
+  }, [value, field, getAsset]);
+
+  return asset ? <StyledImage src={asset} /> : null;
 }
 
 function ImagePreviewContent(props) {

packages/decap-cms-widget-object/src/ObjectPreview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 import { fromJS } from 'immutable';
 
@@ -15,7 +15,7 @@ function ObjectPreview({ field }) {
 }
 
 ObjectPreview.propTypes = {
-  field: PropTypes.node,
+  field: ImmutablePropTypes.map,
 };
 
 export default ObjectPreview;