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

dev-test/config.yml

@@ -18,7 +18,7 @@ collections: # A list of collections the CMS should be able to edit
     summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
     create: true # Allow users to create new documents in this collection
     editor:
-      visualEditing: true
+      visualEditing: false
     view_filters:
       - label: Posts With Index
         field: title

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';
@@ -81,14 +81,24 @@ 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;
   background-repeat: no-repeat;
   height: 150px;
 `;
 
+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,
@@ -117,7 +127,7 @@ function EntryCard({
             {collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null}
             <CardHeading>{summary}</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}
@@ -412,6 +423,7 @@ export default function withFileControl({ forImage } = {}) {
     renderImages = () => {
       const { getAsset, value, field } = this.props;
       const items = valueListToSortableArray(value);
+
       if (isMultiple(value)) {
         return (
           <SortableMultiImageWrapper
@@ -428,10 +440,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,7 +11,18 @@ const StyledImage = styled(({ src }) => <img src={src || ''} role="presentation"
 `;
 
 function StyledImageAsset({ getAsset, value, field }) {
-  return <StyledImage src={getAsset(value, field)} />;
+  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 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';
 
 function ObjectPreview({ field }) {
@@ -11,7 +11,7 @@ function ObjectPreview({ field }) {
 }
 
 ObjectPreview.propTypes = {
-  field: PropTypes.node,
+  field: ImmutablePropTypes.map,
 };
 
 export default ObjectPreview;