如何使用react钩子将文件放入状态变量

import React, { useState } from 'react';

function FileUploader() {
  // 创建一个状态变量files和一个更新函数setFiles
  const [files, setFiles] = useState([]);

  // 处理文件选择的函数
  const handleFileChange = (event) => {
    // 获取选中的文件列表
    const selectedFiles = Array.from(event.target.files);
    // 更新状态变量
    setFiles(selectedFiles);
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <ul>
        {files.map((file, index) => (
          <li key={index}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default FileUploader;

const handleFileChange = (event) => {
  const selectedFiles = Array.from(event.target.files);
  setFiles(prevFiles => [...prevFiles, ...selectedFiles]);
};

<ul>
  {files.map((file, index) => (
    <li key={index}>{file.name}</li>
  ))}
</ul>