在尝试将图像从 res.data.photo 传递给 useContext 时，我得到 Cannot read property 'data' of undefined

Posted 2023-04-14

【中文标题】在尝试将图像从 res.data.photo 传递给 useContext 时，我得到 Cannot read property \'data\' of undefined

【英文标题】：While trying to pass image from res.data.photo to useContext I am getting Cannot read property 'data' of undefined在尝试将图像从 res.data.photo 传递给 useContext 时，我得到 Cannot read property 'data' of undefined

【发布时间】：2020-10-07 22:02:23

【问题描述】：

我得到了，无法读取未定义错误的数据。我在这里所做的只是试图将res.data.photo 从Login.js 传递给useContext(UserLoginContext)。我需要在Navigation.js 中显示图像 src=dataImage,loginImage

未处理的拒绝（TypeError）：无法读取未定义的属性“数据”

Login.js

const loginPhoto, setLoginPhoto = useContext(UserLoginContext);

  const onSubmit = () => 
    const fetchData = async () => 
      try 
        const res = await axios.post('http://localhost:8000/service/login',  email, password );
        console.log("Front End success message:" + res.data.success);
        if (res.data.success) 
          setHelperText("Login successfully");
          setLoginPhoto(res.data.photo);
          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 UserLoginContext from '../context';

const UserLoginProvider = (children) => 

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

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


    return (
       <UserLoginContext.Provider value=value>
           children
       </UserLoginContext.Provider>
    )   

export default UserLoginProvider;

context.js

import React from 'react';

export default React.createContext();

Navigation.js

import UserProfileContext from '../context';
import UserLoginContext from '../context';

const Navigation = () => 

    const history = useHistory();
    const [imageSrc, setImgSrc] = useState(null);
    const [loginImgSrc, setLoginImgSrc] = useState(null);
    const  picture  = useContext(UserProfileContext);
    const  loginPhoto  = useContext(UserLoginContext);

    useEffect(() => 
        if (picture.photo) 
            const reader = new FileReader();
            reader.addEventListener('load', () => 
                setImgSrc(reader.result);
                localStorage.setItem("imgData", reader.result);
            );
            reader.readAsDataURL(picture.photo);
        
    , [picture.photo])

       var dataImage = localStorage.getItem('imgData');

       useEffect(() => 
        if (loginPhoto.photo) 
            const reader = new FileReader();
            reader.addEventListener('load', () => 
                setLoginImgSrc(reader.result);
                localStorage.setItem("loginImgData", reader.result);
            );
            reader.readAsDataURL(loginPhoto.photo);
        
    , [loginPhoto.photo])

    var loginImage = localStorage.getItem('loginImgData');


    return localStorage.getItem('loginEmail') &&
        <div className="App">
            <div className="wrapper">
                <div id="wrap">
                    <nav className="siteNavigation_nav_links">
                        <div className="clubLogo landing" style=divStyle><b>Southside Soccer</b></div>
                        <NavLink className="mobile_register_link" to="/">Home</NavLink>
                        <NavLink className="mobile_register_link" to="/profile">Profile</NavLink>
                        <NavLink className="mobile_login_link" to="/login" onClick=logout>Logout</NavLink>
                        <NavLink className="mobile_login_link" to='/aboutus'>About us</NavLink>
                        <span className="image_login_link"><img className="nav_profile" src=dataImage,loginImage></img></span>
                    </nav>
                </div>
            </div>
        </div>


export default Navigation;

【问题讨论】：

首先，检查res的值，res是否未定义？

对不起，res 不是未定义的，因为如果我在 res.data.success 中评论 setLoginPhoto(res.data.photo); 它允许我登录...

这意味着它很神奇，if (res.data.success) 在这里定义并工作，但在条件为真之后，res 未定义，正如您所说的 Unhandled Rejection (TypeError): Cannot read property 'data' of undefined

是的，只要我评论此行setLoginPhoto(res.data.photo);，它就允许我登录，我强烈认为我在此行是否正确>>.. const loginPhoto, setLoginPhoto = useContext(UserLoginContext);

setLoginPhoto(res.data.photo) 来检查这个手动赋值

【参考方案1】：

在两个不同的提供者/消费者模式之间共享完全相同的上下文是一个非常糟糕的主意：

import UserProfileContext from '../context';
import UserLoginContext from '../context';

这需要是两个不同的上下文：

在context.js:

// context.js
import React from 'react';

export const UserProfileContext = React.createContext();
export const UserLoginContext = React.createContext();

在Navigation.js:

// Navigation.js
import  UserProfileContext, UserLoginContext  from '../context';

如果它们实际上是应该是相同的上下文，那么只需选择一个名称，使用它，并避免重复。其他任何事情都会令人困惑并可能会出错。

【讨论】：

现在尝试导入错误：'../context' 不包含默认导出（导入为'UserProfileContext'）。在另一个名为 Profile..但给出错误的地方导入。我有 @987654326 @

如何根据配置文件中的建议方式更改导入？

@soccerway 就在答案中...import UserProfileContext, UserLoginContext from '../context';

import UserProfileContext, UserLoginContext from '../context'; 他没有导出 const 所以这不是一个有效的声明

@MUHAMMADILYAS 伙计们，我的答案就在那里。您需要在两个文件中进行更改。从 contexts.js 文件中将两个单独的上下文导出为 const，并在 Navigation.js 中以不同的方式导入它们...