Javascript 添加删除时React图像上传重新渲染上传的图像

function App() {
  const [selectedFiles, setSelectedFiles] = React.useState([]);
  const urls = React.useRef(new Set());

  const handleImageDelete = (id) => {
    setSelectedFiles(selectedFiles.filter((file) => {
      if (file.id !== id) return true; // keep in state
      // delete URL from register (Set) and revoke it
      urls.current.delete(file.url);
      URL.revokeObjectURL(file.url);
      return false; // remove from state
    }));
  };

  const handleChange = (e) => {
    const newFiles = Array.from(e.target.files, (fileObject) => {
      const id = crypto.randomUUID();
      // create URL and add it to the register (Set)
      const url = URL.createObjectURL(fileObject);
      urls.current.add(url);
      return { id, url, fileObject };
    });
    setSelectedFiles([...selectedFiles, ...newFiles])
  }
  
  React.useEffect(() => {
    // revoke register URLs on unmount
    return () => {
      for (const url of urls.current) URL.revokeObjectURL(url);
    };
  }, []);

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input accept="image/png, image/gif, image/jpeg" type="file" onChange={handleChange} multiple />
      {selectedFiles.map(
        (file, index) => {
          return (
            <img
              key={file.id}
              onClick={() => handleImageDelete(file.id)}
              style={{ height: "5rem", backgroundColor: "black" }}
              src={file.url}
              alt={"training spot"}
            />
          )
        }
      )}
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>