我正在处理一个上载组件，我有一些卡，这些卡将使用图像以及这些图像和输入进行渲染。 但是当我渲染时（如下面控制台日志中所示），地图正在渲染所有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也被导出！ 有人有一些想法可以尝试吗？ 预先谢谢大家！