Задать вопрос
ms-dred
@ms-dred
Вечно что то не то и что то не так...

Почему показывает что данные контекста пустые, хотя это не так?

Мне нужно было сделать дополнительный контекст для лайков записей, где я смогу подгружать все лайки пользователя. Но проблема в том что при загрузки страницы данные в контексте недоступны, хотя они присутствуют.
У меня всего есть два контекста store и like, возможно я что то не правильно делаю и поэтому сталкиваюсь с проблемой
StoreContext.ts
import React, { createContext, useEffect } from "react"
import Store from "@store/store"
import Like from "@store/like";

interface State {
    store: Store
    like: Like
}

const store = new Store();
const like = new Like();

export const Context = createContext<State>({
    store,
    like
})


_app.js
import { Context } from "@contexts/StoreContext";
const App = ({ Component, pageProps }: AppProps) => {
    //.....
    const { store, like } = useContext(Context)
    const performOnce = useRef(true)
    const performOnceLike = useRef(true)
    //....

    // Тут я получаю данные пользователя если он авторизирован
    useEffect(() => {
        performOnce.current = !performOnce.current
        if (localStorage.getItem("@token") && !performOnce.current) {
            store.checkAuth()
        }
    }, [store])

     // Теперь мне нужно узнать какие записи лайкнул пользователь
     useEffect(() => {
        performOnceLike.current = !performOnceLike.current
        if (store.isAuth && !performOnceLike.current) {
            const { id } = store.profile
            like.getLikes(id)
        }
    }, [store.isAuth, like])
}


Функция like.getLikes создает запрос на сервер получая все лайки пользователя и сохраняет их в переменную profileLikes

export default class Like {

    profileLikes: Array<string> = []
    isLoading = false;

    constructor() {
    }

    setLoading(bool: boolean) {
        this.isLoading = bool
    }

    setProfileLikes(likes: Array<string>) {
        this.profileLikes = likes
    }


    async getLikes(owner: string) {
        this.setLoading(true)
        try {
            const response = await LikeService.get(owner)
            this.setProfileLikes(response.data)
        } catch (e: any) {
            console.error(e.message)
        } finally {
            this.setLoading(false)
        }
    }
}


В компоненте с кнопочкой лайков мне нужно проверить лайкнута ли запись пользователем или нет
ButtonsDocuments.tsx
import { Context } from "@contexts/StoreContext"
const ButtonsDocument = ({ ...props }) => {
    const { id } = props
    const { store, like } = useContext(Context)
    
    useEffect(() => {
        console.log(like)
        //console.log(like.profileLikes.includes(id))
    }, [])
}


В консоли гугла вижу следующее
647c3c70c7567462525595.png
Вроде как Like {profileLikes: Array(0) но массив не пуст совсем
И потому что profileLikes: Array(0) я не могу проверить like.profileLikes.includes(id)
Что не так я делаю?
  • Вопрос задан
  • 52 просмотра
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
Скорее всего, этот твой console.log(like) вызывается до того, как лайчинские загружены. Потому в консоли рисуется Array(0). Далее ты кликаешь на треугольник, но к этому моменту данные уже приходят и потому видны. "Array(0)" не меняется, остаётся как есть.

Проблема твоего стора Like в том, что это нихрена не стор. Он не уведомляет никого об изменении своих данных. Компоненты не перерисовываются. Проще всего здесь использовать mobx, тогда достаточно будет добавить пару строчек в классе Like. Ну, или какой-то иной стейт-манагер.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы