TypeError: Images.map is not a function 업로드 파일저장완료후 웹에 보여지는 부분 오류가 나옵니다.

Question

TypeError: Images.map is not a function
FileUpload
src/components/utils/FileUpload.js:42
  39 |  </div>
  40 |  )}
  41 | </Dropzone>
> 42 | <div style={{ display: 'flex', width: '350px', height: '240px', overflowX: 'scroll'}}>
  | ^  43 |  {Images.map((image, index) => (
  44 |  <div key={index}>
  45 |  <img style={{ minWidth:'300px', width:'300px', height: '240px'}}
(anonymous function)
src/components/utils/FileUpload.js:20
  17 | .then(response => {
  18 |  if(response.data.success) {
  19 |  console.log(response.data);
> 20 |  setImages(...Images, response.data.filePath)
  | ^  21 |  } else {
  22 |  alert('파일을 저장하는데 실패했습니다.');
  23 |  }

This screen is visible only in development. It will not appear if the app crashes in production.

파일업로드 후 웹에 보여지는 부분이 오류가 납니다. 몇시간째 원본코리 비교 중인데요..

Images.map. <== type 오류가 나네요..

FileUpload.js 소스

import React, { useState } from 'react'
import Dropzone from 'react-dropzone'
import { Icon } from 'antd';
import axios from 'axios';

function FileUpload() {
const [Images, setImages] = useState([]);
 
const dropHandler = (files) => {
let formData = new FormData();
const config = {
header: {'content-type': 'multipart/fomr-data'}
}
formData.append("file",files[0]);

axios.post('/api/product/image',formData , config)
.then(response => {
if(response.data.success) {
console.log(response.data);
setImages(...Images, response.data.filePath)
} else {
alert('파일을 저장하는데 실패했습니다.');
}
})
}

return (
<div style={{ display:'flex', justifyContent:'space-between'}}>
<Dropzone onDrop={dropHandler}>
{({ getRootProps, getInputProps}) => (
<div
style={{
width:300, height:240, border: '1px solid lightgray',
display:'flex', alignItems: 'center', justifyContent:'center'
}}
{...getRootProps()}>
<input {...getInputProps()}/>
<Icon type = "plus" style={{ fontSize:'3rem'}} />
</div>
)}
</Dropzone>
<div style={{ display: 'flex', width: '350px', height: '240px', overflowX: 'scroll'}}>
{Images.map((image, index) => (
<div key={index}>
<img style={{ minWidth:'300px', width:'300px', height: '240px'}}
src={`http://localhost:5001/${image}`} />
</div>
))}
</div>
</div>
)
}

export default FileUpload

소스코드는 이상없는거 같은데 오류가 나네요..

{success: true, filePath: 'uploads/1644901338521_스크린샷 2022-02-15 오후 1.49.37.png', fileName: '1644901338521_스크린샷 2022-02-15 오후 1.49.37.png'} FileUpload.js:42 Uncaught TypeError: Images.map is not a function at FileUpload (FileUpload.js:42:1) at renderWithHooks (react-dom.development.js:14803:1) at updateFunctionComponent (react-dom.development.js:17034:1) at beginWork (react-dom.development.js:18610:1) at HTMLUnknownElement.callCallback (react-dom.development.js:188:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1) at invokeGuardedCallback (react-dom.development.js:292:1) at beginWork$1 (react-dom.development.js:23203:1) at performUnitOfWork (react-dom.development.js:22154:1) at workLoopSync (react-dom.development.js:22130:1) at performSyncWorkOnRoot (react-dom.development.js:21756:1) at react-dom.development.js:11089:1 at unstable_runWithPriority (scheduler.development.js:653:1) at runWithPriority$1 (react-dom.development.js:11039:1) at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1) at flushSyncCallbackQueue (react-dom.development.js:11072:1) at scheduleUpdateOnFiber (react-dom.development.js:21199:1) at dispatchAction (react-dom.development.js:15660:1) at FileUpload.js:20:1

김준용 · Answer

setImages (... Images , response . data . filePath )   여기서 이걸 빠트렸네요 []   setImages ([... Images , response . data . filePath] )