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

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'}}<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:874px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>

<button style="cursor:pointer;display:block;width:874px;text-align:left;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;color:black;background:white;margin-bottom:1.5em;border:initial none initial">▶ 17 stack frames were collapsed.</button>

17 | .then(response => {
18 | if(response.data.success) {
19 | console.log(response.data);
> 20 | setImages(...Images, response.data.filePath)
| ^ 21 | } else {
22 | alert('파일을 저장하는데 실패했습니다.');
23 | }<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:874px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>

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}) => (

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 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}`} />

))}

)

}

export default FileUpload