Невозможно отобразить изображение / картинку в навигации, переданной с помощью useContext () - PullRequest
Новая
       23

Невозможно отобразить изображение / картинку в навигации, переданной с помощью useContext ()

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

Изображение отображается в Профиле. js Экран и другие области. Но когда я передал изображение через useContext() для отображения в навигации. js, оно отображает src(unknown), могу ли я узнать, в чем здесь ключевая проблема?

enter image description here Profile.js

const {picture, setPicture} = useContext(UserProfileContext);
const [updateProfile, setUpdateProfile] = useState({ _id: '', photo: '', name: '', email:'', phonenumber:'', position:'', privilege:'', password:''});

     const onChangePicture = e => {
        if (e.target.files.length) {
          setPreview(URL.createObjectURL(e.target.files[0]));
          setPicture(e.target.files[0]);
        } else {
          return false;
        }
      };


      const handleChange = (e, id) => {
        e.persist();
        let itemIndex;
        const targetPlayer = playerProfile.find((player, index) => {
          console.log({ player, id, index });
          itemIndex = index; 
          return player.id === id;
        });
        console.log({ targetPlayer, id, e });
        const editedTarget = {
          ...targetPlayer,
          [e.target.name]: e.target.value
        };
        const tempPlayers = Array.from(playerProfile);
        tempPlayers[itemIndex] = editedTarget;
        setPlayerProfile(tempPlayers);
        setUpdateProfile({ ...updateProfile, [e.target.name]: e.target.value }); // this is added just to see if its working
        setProfile({ ...profile, [e.target.name]: e.target.value });
        setPicture(e.target.files[0]);
      };

    <div className="formInstructionsDiv formElement">
            <div className="register_profile_image">
                 <input id="profilePic" name="photo" type="file" onChange={onChangePicture} />
            </div>
            <div className="previewProfilePic" >
                 <img alt="" onError={addDefaultSrc} name="previewImage" className="playerProfilePic_home_tile" src={photo} onChange={e => handleChange(e, id)}></img>
            </div>
    </div>

UserProfileProvider.js

import UserProfileContext from '../context';

const UserProfileProvider = ({children}) => {

    const [picture, setPicture] = useState({ photo: ''});


     const value = useMemo(() => ({
        picture, setPicture
    }), [picture]);


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

Navigation.js

const Navigation = () => {

    const {picture} = useContext(UserProfileContext); 

    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="mobile_login_link"><img className="nav_profile"src={picture.photo}></img></span>
                    </nav>
                </div>
            </div>
        </div>
}

export default Navigation;

1 Ответ

1 голос
/ 17 июня 2020

изображение должно быть объектом в соответствии с вашим объявлением состояния: 

const [picture, setPicture] = useState({ photo: ''});

однако, когда вы обновляете его, вы устанавливаете в нем файловый объект как setPicture(e.target.files[0]); и, следовательно, picture.photo не определено

Еще одна вещь, на которую следует обратить внимание, это то, что вы не можете напрямую визуализировать изображение из объекта File, вам нужно использовать FileReader и преобразовать его в большой двоичный объект 

const onChangePicture = e => {
    if (e.target.files.length) {
      setPreview(URL.createObjectURL(e.target.files[0]));
      setPicture({photo:e.target.files[0]});
    } else {
      return false;
    }
  };

, тогда вы будете использовать его в навигации как 

const Navigation = () => {
    const [imageSrc, setImgSrc] = useState(null);
    const {picture} = useContext(UserProfileContext); 

    useEffect(() => {
       const reader = new FileReader();
       reader.addEventListener('load', () => {
           setImgSrc(reader.result);
       });
       reader.readAsDataURL(picture.photo);
    }, [picture.photo])
    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="mobile_login_link"><img className="nav_profile"src={imageSrc}></img></span>
                    </nav>
                </div>
            </div>
        </div>
}

export default Navigation;
...