0
import React, { useEffect, useState } from 'react'
import Card from 'src/components/Card/Card'
import { useCardsInfoQuery, useCardsQuery } from 'src/__generated__/graphql'
import { CanvasBody } from './Canvas.styles'

interface ICanvas {
  date: string
}

const Canvas: React.FC<ICanvas> = ({ date }) => {
  const [cards, setCards] = useState([])
  const [cardsInfo, setCardsInfo] = useState([])
  const { data, loading, error } = useCardsInfoQuery({
    variables: {
      date: date ? date : new Date().toLocaleDateString(),
    },
  })
  const getCards = useCardsQuery()

  useEffect(() => {
    if (data) {
      setCardsInfo(data.cardsInfo)
      console.log('получили информацию карточек')
      console.log(data.cardsInfo)
    }
  }, [data])

  useEffect(() => {
    if (getCards.data) {
      setCards(getCards.data.cards)
      console.log('получили карточки')
      console.log(getCards.data.cards)
    }
  }, [getCards, cardsInfo])

  return (
    <CanvasBody>
      {loading ? (
        <div>loading</div>
      ) : (
        cards.map((item, index) => {
console.log(cardsInfo[index])
          return (
            <Card
              name={item.name}
              id={item.id}
              order={item.order}
              key={index}
              date={date}
              text={cardsInfo[index] ? cardsInfo[index].text : ''}
              value={cardsInfo[index] ? cardsInfo[index].value : 0}
            ></Card>
          )
        })
      )}
    </CanvasBody>
  )
}

export default Canvas

Получаю карточки:

const getCards = useCardsQuery()

Получаю информацию для карточек:

const { data, loading, error } = useCardsInfoQuery({
    variables: {
      date: date ? date : new Date().toLocaleDateString(),
    },
  })

Перебираю карточки и рендерю компоненты Card, передавая в них данные с информацией из CardsInfo

        cards.map((item, index) => {
          console.log(cardsInfo[index])
          return (
            <Card
              name={item.name}
              id={item.id}
              order={item.order}
              key={index}
              date={date}
              text={cardsInfo[index] ? cardsInfo[index].text : ''}
              value={cardsInfo[index] ? cardsInfo[index].value : 0}
            ></Card>
          )
        })

Проблема в том, что при перезагрузке страницы примерно в 1 из 4 случаев Card рендерится без данных из cardsInfo. То есть подставляются text и value ' ' и 0 соответственно

              text={cardsInfo[index] ? cardsInfo[index].text : ''}
              value={cardsInfo[index] ? cardsInfo[index].value : 0}

Почему так происходит?

Консоль когда все нормально Консоль когда происходит ошибка

3
  • не совсем понятно , почему используются две сущности: cards и cardsInfo. маппите cards и используете index в cardsInfo. скорее всего либо несоответствие индексов, либо одна из сущностей без данных выведите обе параллельно в консоль и посмотрите , обновляя их
    – sterx
    14 мар в 14:24
  • @sterx добавил в консоль вывод console.log(cardsInfo[index]) при мапе Прикрепил 2 скриншота: 1 - все работает нормально, 2 - данные из cardInfo не добавляются в рендер 14 мар в 15:11
  • @sterx и еще в useEffect добавил вывод в консоль cards и cardsInfo 14 мар в 15:19

1 ответ 1

0

Исправил проблему костылем if (getCards.data && !loading) во втором useEffect

  useEffect(() => {
    if (getCards.data && !loading) {
      setCards(getCards.data.cards)
      console.log('получили карточки')
      console.log(getCards.data.cards)
    }
  }, [getCards, cardsInfo])

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.