ขณะส่งรูปภาพผ่าน useContext จากการเข้าสู่ระบบและรูปภาพไม่แสดง

ระหว่าง onSubmit ในการเข้าสู่ระบบ ฉันได้ setLoginPhoto(res.data.photo)แล้วใช้ useContext() เพื่อส่งข้อมูลภาพถ่ายไปยังการนำทาง แต่เห็นได้ชัดว่าข้อมูลรูปภาพกำลังถูกล้างออกไปเมื่อเข้าสู่ระบบสำเร็จและแสดงหน้าจอหลัก นอกจากนี้loginPhoto.photo รูปภาพเพียงอย่างเดียวคือ undefined แต่ฉันสามารถดูรายละเอียดรูปภาพใน loginPhoto ขณะที่วางเมาส์เหนือรูปภาพนั้น

เมื่อคลิกที่เข้าสู่ระบบ ฉันได้ตั้งค่าจุดพักต่างๆ และเห็นว่าข้อมูลรูปภาพถูกส่งไปที่ UserLoginProvider แล้วจึงพร้อมใช้งานใน Navigation (โปรดดูภาพหน้าจอ)

หมายเหตุ: เส้นทางไฟล์ภาพที่บันทึกลงในฐานข้อมูลโดยใช้ multer เช่น [ var imagePath = req.file.path;] และรูปภาพกำลังแสดงในหน้าจออื่น เช่น หน้าจอหลัก หน้าจอโปรไฟล์

ทีละขั้นตอน: กดที่เข้าสู่ระบบ ฉันจะเห็นว่ามีรูปภาพ loginPhoto ใน UserLoginProvider ( โปรดดูภาพหน้าจอ )

ตอนนี้ฉันเห็น loginPhoto พร้อมใช้งานในการนำทางแล้ว:

แต่เมื่อเข้าสู่ระบบสำเร็จและหน้าแรกปรากฏขึ้น loginPhoto จะกลายเป็นโมฆะและรูปภาพไม่แสดงในการนำทาง มีคำแนะนำเกี่ยวกับวิธีการแก้ไขปัญหานี้หรือไม่?

Login.js

import React, { useContext, useEffect, useState } from "react";
import { UserProfileContext, UserLoginContext } from '../context';

  const {loginPhoto, setLoginPhoto} = useContext(UserLoginContext);
  const [helperText, setHelperText] = useState('');
  const [value, setValue] = React.useState('');
const onSubmit = () => {
    const fetchData = async () => {
      try {
        const res = await axios.post('http://localhost:8000/service/login', { email, password });
        //setLoginData(res.data.loginData);  
        console.log("Front End success message:" + res.data.success);
        console.log("My Photo Data:" + res.data.photo);
        setLoginPhoto(res.data.photo);
        if (res.data.success) {
          setHelperText("Login successfully");
          setValue(res.data.privilege);
          localStorage.setItem('Privilege', res.data.privilege);
          localStorage.setItem('loginEmail', email);
          history.push('/')
          window.location.reload(true)
        }
        else {
          const failMessage = res.data.fail;
          setHelperText(failMessage);
        }
      } catch (e) {
        console.log(e.response.data);
        setHelperText(e.response.data.fail);
      }
    }
    fetchData();
  };

UserLoginProvider.js

import { UserProfileContext, UserLoginContext } from '../context';

const UserLoginProvider = ({children}) => {

    const [loginPhoto, setLoginPhoto] = useState({ photo: ''});

    console.log("Nav Image:"+loginPhoto);

     const value = useMemo(() => ({
        loginPhoto, setLoginPhoto
    }), [loginPhoto]);

    return (
       <UserLoginContext.Provider value={value}>
           {children}
       </UserLoginContext.Provider>
    )   
}
export default UserLoginProvider;

Navigation.js

import { UserProfileContext, UserLoginContext } from '../context';
    const { loginPhoto } = useContext(UserLoginContext);
    
        useEffect(() => {
            if (loginPhoto.photo) {
            
            const reader = new FileReader();
            reader.addEventListener('load', () => {
                setImgSrc(reader.result);
                localStorage.setItem("imgData", reader.result);
            });
            reader.readAsDataURL(loginPhoto.photo);
            }
        }, [loginPhoto.photo])
    
        var loginUserImg = localStorage.getItem('imgData');
    
        console.log(loginUserImg);
    
     <img className="nav_profile" src={loginUserImg}></img>

App.js

var ReactDOM = require("react-dom");


const App = () => {

  return (
  <BrowserRouter>
  <UserLoginProvider>
    <UserProfileProvider>
          <>
        <Navigation />
          <Switch>
              <ProtectedRoute exact path="/" component={Home} />
              <ProtectedRoute path="/profile" component={Profile} />
              <ProtectedRoute path="/aboutus" component={Aboutus} />
              <ProtectedRoute path="/availability" component={Availability} />
              <Route path="/register" component={Register} />
              <Route path="/login" component={Login} />
              <Route exact path="*" component={ErrorPage} />
          </Switch>
          </>
      </UserProfileProvider>
    </UserLoginProvider>
   </BrowserRouter>
  );
};
ReactDOM.render(
  React.createElement(App, null),
  document.getElementById("root")
);

export default App;

home.js

import React, { useRef, useEffect, useState } from "react";
import AlertDialog from "../modal/Dialog";
import Axios from "axios";


const Home = () => {

  const [phoneTooltip, setPhoneTooltip] = useState({ show: false, position: "absolute" });
  const [playerList, setPlayerList] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const [deleteIcon, setDeleteIcon] = useState({ show: false });
  const [deleteDialog, setDeleteDialog] = useState(false);
  const [playerId, setPlayerId] = useState("");
  const isMounted = useRef(false);
  const [isLoading, setIsLoading] = useState(true);


  const handleChange = event => {
    setSearchTerm(event.target.value);
  };


  useEffect(() => {
    isMounted.current = true;
    return () => isMounted.current = false;
  }, []);


  useEffect(() => {
    setTimeout ( () => {
    const fetchData = async () => {
      try {
        const res = await Axios.get('http://localhost:8000/service/players');
        if (isMounted.current) {
          setPlayerList(res.data.players);
          setSearchResults(res.data.players);
          const privilege = localStorage.getItem('Privilege');
          console.log("What is getting in Front End:" + privilege);
          showDeleteIcon(privilege);
          setIsLoading(false);
        }
      } catch (e) {
        if (isMounted.current) {
          setIsLoading(false);
        }
        console.log(e);
      }
    }
    fetchData();
    }, 1500);
  }, []);


  useEffect(() => {
    const results = playerList.filter(player =>
      player.name.toLowerCase().includes(searchTerm) || player.name.toUpperCase().includes(searchTerm) || player.position.toLowerCase().includes(searchTerm)
      || player.position.toUpperCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm, playerList]);


  const displayPhoneToolTip = (userId) => e => {
    e.preventDefault();
    setPhoneTooltip(userId); // show tooltip
    setTimeout(() => {
      setPhoneTooltip(false); // remove/hide tooltip
    }, 4000);
  };

  const showDeleteIcon = (privilege) => {
    if (privilege === "ADMIN") {
      setDeleteIcon({ show: true })
    } else {
      setDeleteIcon({ show: false })
    }
  }
  const deletePlayer = (id) => e => {
    setPlayerId(id);
    setDeleteDialog(true);
  }

  const onDelete = id => () => {
    try {
      Axios.delete('http://localhost:8000/service/player', {
        headers: {
          'Content-Type': 'application/json'
        },
        data: {
          'id': id
        }
      });
      setDeleteDialog(false);
      const restOfPlayerResults = searchResults.filter((result) => result.id !== id)
      setSearchResults(restOfPlayerResults);
    } catch (e) {
      console.log(e);
    }
  }


  return (
    <div className="App">
      <div className="wrapper">
        <div className="playerList_header">
          <h2>Players</h2>
          <label>
            <div className="playerSearch_Home">
              <div className="playerSearch_Icon">
                <img alt="" src="/images/search-image-player.jpg"></img>
              </div>
              <input type="text" className="playerSearch_Home_Input" placeholder="Search players..." value={searchTerm} onChange={handleChange} />
            </div>
          </label>
        </div>
        <div>
        {!searchResults.length && !isLoading && (<div> <p className="noSearchData"> Does not match any results! </p> </div>)}
        <div className="playerList_home_page">
        {isLoading ? (
        <div className="loader">
        <div className="bubble"></div>
        <div className="bubble"></div>
        <div className="bubble"></div>
        <div className="bubble"></div>
      </div>
      ) : (
          <div className="grid-container">
            {
              searchResults.map(({ id, photo, position, phonenumber, name }) => (
                <div key={id} className="grid-item">
                  {
                    deleteIcon.show && (
                      <span className="deletePlayerButton" onClick={deletePlayer(id)}>
                        <img className="deletePlayerimg" src="/images/delete.png"></img>
                      </span>
                    )}
                  <div>
                    <img alt="" className="playerProfilePic_home_tile" key={photo} src={photo}></img>
                  </div>
                  <div className="playerProfile_grid_border">
                    <span className="rec_name_position_data">
                      <h3 key={name}>{name}</h3>
                      <span className="playerPosition_home_tile" key={position}>{position}</span>
                    </span>
                  </div>
                  <span className="phoneNumber_home">
                    <img src="/images/phone.png" alt={"phoneTooltip.show"} key={id} name="phoneNumberhomeicon" onClick={displayPhoneToolTip(id)} />
                  </span>
                  {phoneTooltip === id && (
                    <div className="tooltip_PhoneNumber_home" key={phonenumber}>{phonenumber}</div>
                  )}
                </div>
              ))
            }
          </div>
         )}
        </div>
       </div> 
      </div>
      <AlertDialog
        onDelete={onDelete}
        open={deleteDialog}
        onClose={() => setDeleteDialog(false)}
        playerId={playerId}
      />
    </div>
  );
}

export default Home;