地图正在重新渲染我已经渲染的所有组件

如何解决地图正在重新渲染我已经渲染的所有组件

我正在处理一个上载组件，我有一些卡，这些卡将使用图像以及这些图像和输入进行渲染。 但是当我渲染时（如下面控制台日志中所示），地图正在渲染所有8张图像，然后他又重新开始，然后出现一个循环。

index.js?64f4:41 []
index.js?64f4:41 []
index.js?64f4:41 (9) [{…},{…},{…}]
index.js?64f4:107 inside map of pictures 0
index.js?64f4:107 inside map of pictures 1
index.js?64f4:107 inside map of pictures 2
index.js?64f4:107 inside map of pictures 3
index.js?64f4:107 inside map of pictures 4
index.js?64f4:107 inside map of pictures 5
index.js?64f4:107 inside map of pictures 6
index.js?64f4:107 inside map of pictures 7
index.js?64f4:107 inside map of pictures 8
index.js?44e2:57 inside cardForm 0
index.js?44e2:57 inside cardForm 1
index.js?44e2:57 inside cardForm 2
index.js?44e2:57 inside cardForm 3
index.js?44e2:57 inside cardForm 4
index.js?44e2:57 inside cardForm 5
index.js?44e2:57 inside cardForm 6
index.js?44e2:57 inside cardForm 7
index.js?44e2:57 inside cardForm 8
index.js?64f4:41 (9) [{…},{…}]
index.js?64f4:107 inside map of pictures 0
index.js?64f4:107 inside map of pictures 1
index.js?64f4:107 inside map of pictures 2
index.js?64f4:107 inside map of pictures 3
index.js?64f4:107 inside map of pictures 4
index.js?64f4:107 inside map of pictures 5
index.js?64f4:107 inside map of pictures 6
index.js?64f4:107 inside map of pictures 7
index.js?64f4:107 inside map of pictures 8
index.js?44e2:57 inside cardForm 0
index.js?44e2:57 inside cardForm 1
index.js?44e2:57 inside cardForm 2
index.js?44e2:57 inside cardForm 3
index.js?44e2:57 inside cardForm 4
index.js?44e2:57 inside cardForm 5
index.js?44e2:57 inside cardForm 5
index.js?0370:1 Uncaught DOMException: The source image cannot be decoded.
g @ index.js?0370:1
CardForm @ index.js?44e2:53
CardForm @ react-hot-loader.development.js?c2cb:827
renderWithHooks @ react-dom.development.js?61bb:15590
updateFunctionComponent @ react-dom.development.js?61bb:18021
updateSimpleMemoComponent @ react-dom.development.js?61bb:17880
updateMemoComponent @ react-dom.development.js?61bb:17757
beginWork @ react-dom.development.js?61bb:20041
callCallback @ react-dom.development.js?61bb:310
invokeGuardedCallbackDev @ react-dom.development.js?61bb:359
invokeGuardedCallback @ react-dom.development.js?61bb:421
beginWork$1 @ react-dom.development.js?61bb:25127
performUnitOfWork @ react-dom.development.js?61bb:23859
workLoopConcurrent @ react-dom.development.js?61bb:23845
renderRootConcurrent @ react-dom.development.js?61bb:23802
performConcurrentWorkOnRoot @ react-dom.development.js?61bb:23035
workLoop @ scheduler.development.js?1911:595
flushWork @ scheduler.development.js?1911:550
performWorkUntilDeadline @ scheduler.development.js?1911:162
index.js?44e2:57 inside cardForm 6
index.js?44e2:57 inside cardForm 7
index.js?44e2:57 inside cardForm 8
index.js?64f4:41 (9) [{…},{…}]
index.js?64f4:107 inside map of pictures 0
index.js?64f4:107 inside map of pictures 1
index.js?64f4:107 inside map of pictures 2
index.js?64f4:107 inside map of pictures 3
index.js?64f4:107 inside map of pictures 4
index.js?64f4:107 inside map of pictures 5
index.js?64f4:107 inside map of pictures 6
index.js?64f4:107 inside map of pictures 7
index.js?64f4:107 inside map of pictures 8
index.js?44e2:57 inside cardForm 0
index.js?44e2:57 inside cardForm 1
index.js?44e2:57 inside cardForm 2
index.js?44e2:57 inside cardForm 3
index.js?44e2:57 inside cardForm 4
index.js?44e2:57 inside cardForm 5
index.js?44e2:57 inside cardForm 5
index.js?0370:1 Uncaught DOMException: The source image cannot be decoded.
g @ index.js?0370:1
CardForm @ index.js?44e2:53
CardForm @ react-hot-loader.development.js?c2cb:827
renderWithHooks @ react-dom.development.js?61bb:15590
updateFunctionComponent @ react-dom.development.js?61bb:18021
updateSimpleMemoComponent @ react-dom.development.js?61bb:17880
updateMemoComponent @ react-dom.development.js?61bb:17757
beginWork @ react-dom.development.js?61bb:20041
callCallback @ react-dom.development.js?61bb:310
invokeGuardedCallbackDev @ react-dom.development.js?61bb:359
invokeGuardedCallback @ react-dom.development.js?61bb:421
beginWork$1 @ react-dom.development.js?61bb:25127
performUnitOfWork @ react-dom.development.js?61bb:23859
workLoopSync @ react-dom.development.js?61bb:23779
renderRootSync @ react-dom.development.js?61bb:23738
performConcurrentWorkOnRoot @ react-dom.development.js?61bb:23062
workLoop @ scheduler.development.js?1911:595
flushWork @ scheduler.development.js?1911:550
performWorkUntilDeadline @ scheduler.development.js?1911:162
index.js?44e2:57 inside cardForm 6
index.js?44e2:57 inside cardForm 7
index.js?44e2:57 inside cardForm 8
index.js?2c06:35 DOMException: The source image cannot be decoded. {componentStack: "↵    at CardForm (webpack-internal:///./node_modul…ader/dist/react-hot-loader.development.js:827:20)"}

这是我的地图

{pictures.map((picture,index) => {
                console.log('inside map of pictures',index)
                return (
                  <div key={index}>
                    <Suspense fallback={<Spinner size="5rem" />}>
                      <Card
                        key={index}
                        identifierOfPicture={picture.identifier}
                        states={states}
                        filesList={filesList}
                        setFiles={setFiles}
                        index={index}
                        picture={picture.urlImage}
                        removeImage={removeImage}
                        duplicateImage={duplicateImage}
                        arrayOfInputs={inputs(states,picture.identifier,dispatch,defaultQuantityValue,device,isSubmitting)}
                        pictures={pictures}
                        setPictures={setPictures}
                        dispatch={dispatch}
                        uuid={uuid}
                        thumbPhoto={thumbPhoto}
                        setThumbPhoto={setThumbPhoto}
                      />
                    </Suspense>
                  </div>
                )
              })}

该组件被导出为备忘录（UploadImages），并且cardForm也被导出！ 有人有一些想法可以尝试吗？ 预先谢谢大家！