При попытке передать изображение из res.data.photo в useContext я получаю Cannot read property 'data' of undefined - PullRequest
Новая
       104

При попытке передать изображение из res.data.photo в useContext я получаю Cannot read property 'data' of undefined

3 голосов
/ 18 июня 2020

Я получаю, не могу прочитать данные неопределенной ошибки. Все, что я здесь делаю, это пытаюсь передать res.data.photo в useContext(UserLoginContext) из Login.js. Мне нужно отобразить изображение в Navigation.js src = {dataImage}, {loginImage}

Необработанное отклонение (TypeError): невозможно прочитать данные свойства undefined

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;

1 Ответ

0 голосов
/ 18 июня 2020

Это действительно плохая идея - использовать один и тот же контекст между двумя разными шаблонами поставщика / потребителя: 

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

Это должны быть два отдельных контекста:

In context.js: 

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

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

In Navigation.js: 

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

Если они на самом деле должны быть в одном контексте, тогда просто выберите одно имя, используйте его и избегать дублирования. Все остальное сбивает с толку и может привести к ошибкам.

...