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}
Почему так происходит?