React使用函数组件时报错，如何将类组件的文件上传代码转为函数组件写法？

改造后的函数组件写法如下： #

import React, { useState } from 'react';
// 以下两个导入路径按你项目实际配置调整即可
import Grid from '@mui/material/Grid';
import UploadComponent from './UploadComponent';

const YourEditComponent = () => {
  // 替代类组件的this.state声明状态
  const [brokerLogoUrl, setBrokerLogoUrl] = useState('');

  const onUpload = (url) => {
    console.log('I have been clicked', url);
    // 替代类组件的this.setState更新状态
    setBrokerLogoUrl(url);
  };

  const callbacks = { upload: onUpload };

  return (
    <Grid className="CoomonT">
      <UploadComponent {...callbacks} />
    </Grid>
  );
};

export default YourEditComponent;

核心改动说明 #

• 用useState Hook替代类组件的this.setState管理brokerLogoUrl状态，无需额外处理this上下文绑定问题
• 上传回调直接在函数组件内部定义即可，原有逻辑完全复用，没有变动
• 注意修正原类组件代码里Grid标签大小写不一致的问题，组件标签统一用大写开头

内容的提问来源于stack exchange，提问作者govind jha