發送到子組件時反應未定義的屬性

我想將登錄用戶物件發送到個人資料頁面以編輯和上傳影像，但它以錯誤“ProfileImage.jsx:25 Uncaught TypeError: Cannot read properties of undefined (reading 'photoUrl')”結尾。這是我的父代碼：

import React from 'react';
import { useState } from 'react';
import {getCurrentUser, logout} from '../../services/authService'

import {useNavigate} from "react-router-dom";
import UpdateForm from '../../components/UpdateForm';
import ProfileImage from '../../components/ProfileImage';

import './Profile.css'
import { useEffect } from 'react';


const ProfilePage = () => {
    
    const navigate = useNavigate();
    const [user,setUser] = useState();
    
    useEffect(()=>{
        const getUser = async () => {
            const {data} = await getCurrentUser();
            setUser(data);
        }
        getUser()
    },[])
    
    const handelSignOut =()=>{
        logout();
        setUser('');
        navigate('/sign')
    }
    
    return (
        <div className='prof-con'>
            <div className='prof-flex-wraper'>
               <div className='prof-second-row'>
                    <div className='prof-text'>
                        <ProfileImage user={user}/>
                    </div>
                    <div className='prof-form'>
                        <UpdateForm user={user}/> 
                    </div>
                </div>
            </div>

        </div>
    );
}
export default ProfilePage;

這是組態檔子組件

import React from 'react';
import { useState } from 'react';
import {updatePhoto} from '../services/authService'
import DefaultUserPic from "../images/team-male.jpg";

function ProfileImage({user}) {
    const [previewSrc,setPreviewSrc] = useState(null)
    const [photoSrc,setPhotoSrc] = useState(null)
    
    
    const handelPreview = (e)=>{
        setPreviewSrc(URL.createObjectURL(e.target.files[0]))
        setPhotoSrc(e.target.files[0]);
    }
    
    const handelUpload = ()=>{
       const formData = new FormData();
       console.log(photoSrc)
       formData.append("file", photoSrc);
       updatePhoto(formData);
    }
    
    //console.log(user.photoUrl)
    console.log(user)
    
 
    // if(previewSrc){
    //     var imagestr=previewSrc;
    //     console.log(imagestr)
    //     // imagestr = imagestr.replace("public/", "");
    //     // var profilePic="http://localhost:3001/" imagestr;
    // }else{
    //      var profilePic='DefaultUserPic';
    // }
    
 
    return (
        <div className='profWraper'>
            <input type="file" name="fileToUpload" id="fileToUpload" onChange={handelPreview}/>
            <img className='profPhoto' src={previewSrc} alt="No-Image" />
            {photoSrc && <button className='uploadBtn' onClick={handelUpload}>Upload</button>}
            
        </div>
    );
}

export default ProfileImage;

如果我記錄用戶本身，我會在控制臺中獲取它，但如果我嘗試獲取任何屬性，則會出現未定義的錯誤。

uj5u.com熱心網友回復：

改變

<ProfileImage user={user}/>

至

{user && <ProfileImage user={user}/>}

可能有幫助

uj5u.com熱心網友回復：

您正在 ProfileImage 的 useEffect 中異步分配用戶。這意味著在異步邏輯解決之前，用戶將是未定義的。您要么必須在訪問其屬性之前檢查用戶是否已定義，要么您需要在 useState 中為用戶分配某種默認屬性。

uj5u.com熱心網友回復：

錯誤訊息表明user未定義。考慮到父母執行異步操作來獲取user，我想說問題是孩子user在異步操作解決之前嘗試訪問 。

user解決方案，在孩子中添加一個防止未定義的防護：

if (user === undefined) return

標籤：javascript 反应 图片 反应钩子

上一篇：如何在html片段中的影像和居中文本之間創建空間

下一篇：無法將PNG轉換為縮放位圖