3

我得到了，无法读取未定义错误的数据。我在这里所做的只是res.data.photo试图useContext(UserLoginContext)从Login.js. 我需要在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;
4

1 回答 1

0

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

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';

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

于 2020-06-18T01:45:41.927 回答