上载多个上载react的处理状态

import React, { useState } from 'react';

const FileUploader = () => {
  const [uploads, setUploads] = useState([]);

  const handleUpload = (file) => {
    const newUpload = { file, status: 'uploading', progress: 0 };
    setUploads([...uploads, newUpload]);

    // 模拟上传过程
    const interval = setInterval(() => {
      if (newUpload.progress < 100) {
        newUpload.progress += 10;
        setUploads([...uploads]);
      } else {
        clearInterval(interval);
        newUpload.status = 'completed';
        setUploads([...uploads]);
      }
    }, 500);
  };

  return (
    <div>
      {uploads.map((upload, index) => (
        <div key={index}>
          <p>{upload.file.name} - {upload.status} - {upload.progress}%</p>
        </div>
      ))}
      <input type="file" onChange={(e) => handleUpload(e.target.files[0])} multiple />
    </div>
  );
};

export default FileUploader;