reactjs:如何从函数内部更新reader.onload()函数外部的变量？

import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState('');

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      const result = e.target.result;
      setData(result); // 更新状态变量data
    };

    reader.readAsText(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
      <p>{data}</p> {/* 显示更新后的data */}
    </div>
  );
};

export default MyComponent;