bounty将在7天后过期。回答此问题可获得+50的声望奖励。COders Lime正在寻找标准答案：我知道这是新手的问题，但我新的，所以请原谅我。我需要详细的答案与代码。如果你需要额外的信息代码让我知道。

我是新的React，所以请原谅任何错误。我想更新用户配置文件图片，但我不知道我如何才能使一个可点击的图像（variable name ->"avatar" in code），预览，然后更新（在数据库中也），如果我们点击保存。
有人能帮我添加一个可点击的图像，预览和更新从和数据库以及。

**如果我们不能使可点击的图像，一个单独的按钮上传和保存也将是好的。**让我知道，如果你想了解更多关于代码的信息。

import React from 'react';
import ProfileBanner from '../ProfileBanner';
import coverSrc from 'assets/img/generic/4.jpg';
//import avatar from 'assets/img/team/2.jpg';
import { Col, Row } from 'react-bootstrap';
import ProfileSettings from './ProfileSettings';
//import ExperiencesSettings from './ExperiencesSettings';
//import EducationSettings from './EducationSettings';
//import AccountSettings from './AccountSettings';
import BillingSettings from './BillingSettings';
import ChangePassword from './ChangePassword';
import DangerZone from './DangerZone';
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useEffect ,useState,useRef} from 'react';
import { toast } from 'react-toastify';

 const Settings = () => {
  
  const [formData, setFormData] = useState({
    avatar: '',
    });

  //const { avatar} = formData;
  
  const cookies = new Cookies();
  const user_id = cookies.get('xyz');

  useEffect(async () => {
   
    //e.preventDefault();
    const config = {
      
      headers: {
          "Content-Type": "application/json",

      },
  };

  try {
    
    const { data } = await axios.post(

        `/api/auth/ImageRetrieve`,
        {
          user_id
        },
        config

    );
    
    setFormData({
      avatar:data.link
    });
  } 
  catch (error) {
    toast.success('Something went wrong', {
    theme: 'colored'
  });

  }
  
}, []);
  
  

  return (
    <>
   
      <ProfileBanner>
        
        <div> 
        
           <ProfileBanner.Header
          coverSrc={coverSrc}
          avatar={formData.avatar}
          className="mb-8"
          /> 
          
           
         </div>
        
        
        
      </ProfileBanner>
      
      <Row className="g-3">
        <Col lg={8}>
          <ProfileSettings />
          {/*<ExperiencesSettings />
          <EducationSettings />}*/}
          <br></br>
          <ChangePassword />
        </Col>
        <Col lg={4}>
          <div className="sticky-sidebar">
           {/* <AccountSettings />*/}
            <BillingSettings />
            
            <DangerZone />
          </div>
            </Col>
          </Row>
        </>
      );
    };
    
    export default Settings;