类型错误：无法读取未定义的属性（读取 \'1\'）

Question

我遇到了一个我无法解决的问题。所有的问题都是在用户登录之后。我使用useEffect()通过使用来自localstorage的秘密令牌来获取用户。当然，数据看起来不错，secret 也不错，get 请求也不错，但是..我正在使用 useContext 与 setUser 和 user。所以当我得到一个数据时，我将它设置为setUser(res.data)，就像这样。比<img src='${user.image[1]}' alt=''/>我收到这样的错误：

正如我所说，我得到的数据很好，但由于某种原因，front 无法访问它。问题原因是useEffect() 加载太晚，导致前面已经加载了吗？

我使用控制台检查我从user 那里得到了什么，所以结果很好，我得到了完整的用户名、图像（数组）、秘密等等。但是，如果我从 <img src='${user.image[1]}' alt='' 更改为 <img src='${user.image}' alt=''，则会加载顶部带有用户名的页面，但会收到错误消息，提示已获取数组。但是页面看起来不错，只是里面没有图像。如果我在用户登录时改回user.image[1]，图像就会出现！但是，如果用户注销并重新登录，则会出现与开始时相同的错误。

有关代码的更多信息：我使用useEffect() 的组件是UserTrigger。然后我将它导入组件Toolbar，语法为{isLoggedIn && <UserTrigger/>}。 isLoggedIn 是本地存储中的布尔值，在用户登录时设置。

有我的代码：

用户触发器：

import React, { useContext, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import MainContext from '../context/MainContext';
import { get } from '../helper/helper'

export default function UserTrigger() {
    const { user, setMessage, setUser, isLoggedIn } = useContext(MainContext);

    const nav = useNavigate();

    useEffect(() => {
        async function fetchUser() {
            const secret = window.localStorage.getItem('secret')
            console.log('secret', secret)
            const res = await get(`user/${secret}`)
            console.log(res.data.image[0])
            setUser(res.data)
        }
        if (isLoggedIn) {
            fetchUser()
        } else {
            nav('/login')
        }
    }, [])
    console.log(user)
    return (

        <div className='toolbar__user'>
            <img src={user.image[1]} alt="" />
            <h2>{user.username}</h2>

            <button onClick={() => { setMessage(''); setUser(null); nav('/'); window.localStorage.removeItem('isLoggedIn'); window.localStorage.removeItem('secret') }}>
                Logout
            </button>

        </div>
    );
}

工具栏：

import React, { useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import MainContext from '../context/MainContext';
import UserTrigger from './UserTrigger';

export default function Toolbar() {

    const { setMessage, isLoggedIn } = useContext(MainContext);
    const nav = useNavigate()

    return (
        <header className='toolbar'>
            {/* Logo */}
            <div className='toolbar__logo'>
                <img src={require('../images/CartoonMatch.png')} alt='logo' />
            </div>

            {/* Links */}
            <div className='toolbar__links'>

                <div className="toolbar__drop">
                    <button className="dropbtn">Products</button>
                    <div className="dropdown-content">
                        <Link to="/feature/premium">Premium Features</Link>
                        <Link to="/feature/subscription">Subscription Tiers</Link>
                        <Link to="/feature/plus">Cartoon Plus</Link>
                        <Link to="/feature/gold">Cartoon Gold</Link>
                        <Link to="/feature/platinum">Cartoon Platinum</Link>
                        <Link to="/feature/night">Swipe Night</Link>
                    </div>
                </div>
                <Link onClick={() => { setMessage(''); }} to='/learn'>Learn</Link>
                <div className="toolbar__drop">
                    <button className="dropbtn">Safety</button>
                    <div className="dropdown-content">
                        <Link to="/safety/guide">Community Guidelines</Link>
                        <Link to="/safety/tips">Safety Tips</Link>
                        <Link to="/safety/policy">Safety & Policy</Link>
                        <Link to="/safety/report">Safety & Reporting</Link>
                        <Link to="/safety/security">Security</Link>
                    </div>
                </div>
                <Link onClick={() => { setMessage(''); }} to='/support'> Support </Link>
                <Link onClick={() => { setMessage(''); }} to='/download'> Download </Link>
            </div>

            {isLoggedIn && <UserTrigger />}
            {!isLoggedIn && <button className='toolbar__signin' onClick={() => { nav('/login') }}>Sign In</button>}
        </header>
    );
}

抱歉英语不好，但我希望你能理解我。谢谢！

Answer 1

尝试这样做：
<img src={${user?.image[1]}} alt="" />