인프런 커뮤니티 질문&답변

Multer 이용하여 파일 업로드할떄

Each child in a list should have a unique 오류가자꾸 뜹니다..

import React from 'react'
import Dropzone from 'react-dropzone'
import axiosInstance from '../utils/axios';
import PropTypes from 'prop-types';

const FileUpload = ({ onImageChange, images }) => {

  const handleDrop = async (files) => {
    let formData = new FormData();

    const config = {
      header: { 'content-type': 'multipart/form-data' }
    }

    formData.append('file', files[0]);

    try {
      const response = await axiosInstance.post('/products/image', formData, config);
      onImageChange([...images, response.data.fileName]);

    } catch (error) {
      console.error(error);
    }

  }



  return (
    <div className='flex gap-4'>

      <Dropzone onDrop={handleDrop}>
        {({ getRootProps, getInputProps }) => (
          <section
            className='min-w-[300px] h-[300px] border flex items-center justify-center'
          >
            <div {...getRootProps()}>
              <input {...getInputProps()} />
              <p className='text-3xl'>+</p>
            </div>
          </section>
        )}
      </Dropzone>

      <div className='flex-grow h-[300px] border flex items-center justify-center overflow-x-scroll overflow-y-hidden'>
        {images.map(image => (
          <div key={image}>
            <img
              className='min-w-[300px] h-[300px]'
              src={`${import.meta.env.VITE_SERVER_URL}/${image}`}
              alt={image}
            />
          </div>
        ))}
      </div>

    </div>
  )
}

FileUpload.propTypes = {
  //  onImagesChnage: PropTypes.bool.isRequired,
  onImageChange: PropTypes.any,
  images: PropTypes.any,
};

export default FileUpload