Почему js выдает ошибку TypeError: Cannot read properties of undefined (reading '0')?

Question

Здравствуйте, помогите пожалуйста. Я пишу на React и использую Mobx вместо redux toolkit. У меня есть страница логина и страница пользователя. Когда пользователь авторизовывается или регистрируется его перекидывает на его страницу с чатами, где есть такой компонент: Servers. В этом компоненте мапится список чатов пользователя и выводятся его чаты. Но возникает ошибка то что нет такого списка, хотя я поставил условный рендеринг на то, есть ли список чатов. Помогите пожалуйста

Ошибка: Uncaught TypeError: Cannot read properties of undefined (reading '0')

store.ts

123456789101112131415161718192021222324252627282930313233343536373839404142434445

 
import { makeAutoObservable } from 'mobx' 
import IUser from '../interfaces/response/User' 
import Auth from '../services/Auth' 
import axios, { AxiosError } from 'axios' 
import { API_URL } from '../http' 
import IMessage from '../interfaces/response/Message'

export default class Store { 
  user = {} as IUser 
  isAuth = false 
  isLoaded = false 
 
  constructor () { 
    makeAutoObservable(this) 
  } 
 
  setAuth(bool:boolean) { 
    this.isAuth = bool 
  } 
 
  setUser(user:IUser) { 
    this.user = user 
  } 
 
  setLoaded(bool:boolean) { 
    this.isLoaded = bool 
  } 
 
  async login(email:string, password:string) { 
    this.setLoaded(false) 
    try { 
      const res = await Auth.login(email, password) 
      console.log(res); 
      localStorage.setItem("token", res.data.accessToken) 
      this.setUser(res.data.user) 
      this.setAuth(true) 
    } catch (e) { 
      const error = e as AxiosError 
      return error 
    } finally { 
      this.setLoaded(true) 
    } 
  } 
}

guilds.tsx

123456789101112131415161718192021222324252627282930313233343536373839404142434445

 import { FC, useContext } from 'react' 
import styles from "./Servers.module.scss" 
import { BsDiscord } from 'react-icons/bs' 
import { AiOutlinePlus, AiOutlineDownload } from 'react-icons/ai' 
import { FaCompass } from 'react-icons/fa6' 
import server_1 from '../../assets/servers/server-1.png' 
import { Link } from 'react-router-dom' 
import { Context } from '../../main' 
import { observer } from 'mobx-react-lite' 
 
const Servers:FC = ():JSX.Element => { 
  const {store} = useContext(Context) 
 
  return ( 
    <> 
     
    <div className={styles.servers}> 
      <div className={styles.dis_btn}> 
        <Link to="/channels/@me"><button><BsDiscord className={styles.BsDiscord} /></button></Link> 
      </div> 
      <div className={styles.servers_buttons}> 
        {store.user.guilds.map((e, index) => ( 
          <div className={styles.button} key={index}> 
            <Link to={`/channels/${e?.name}/${e?.category[0]?.name}/${e?.category[0]?.channels[0]?.name}`}><button><img src="https://{server_1}" width="-1" height="-1" alt = "false|false"/></button></Link> 
          </div> 
        ))} 
      </div> 
      <div className={styles.bottom_btns}> 
        <div className={styles.button}> 
          <button onClick={() => store.setCreateForm(true)}><AiOutlinePlus className={styles.AiOutlinePlus} /></button> 
        </div> 
        <div className={styles.button}> 
          <button><FaCompass className={styles.FaCompass} /></button> 
        </div> 
        <div className={styles.button}> 
          <button><AiOutlineDownload className={styles.AiOutlineDownload} /></button> 
        </div> 
      </div> 
    </div> 
     
    </> 
  ) 
} 
 
export default observer(Servers)

{store.user.guilds.map((e, index) => (

))}

) } export default observer(Servers)

petr_alekseevich_1 · Accepted Answer

e?.category[0]?.name 
Вот здесь что-то пошло не так, выводи в консоль элемент в цикле перед возвратом разметки и смотри что там.
И да, классовый компонент с тайпскриптом, это на полном серьезе?