Почему типизация видит в переменной undefined?

Question

[Александр Иванов]

есть компонент

import { useEffect, useState } from "react"
import { useParams } from "react-router-dom"
import FullNewsComponent from "@/components/ui/fullNewsPage/FullNewsComponent"
import dfn from '../demoData/demoFullNews.json'
import { IFullNewsInterface } from "@/components/interfaces/FullNews.interface"

const FullNewsPage = () => {
  const [fullNewsData, setFullNewsData] = useState<IFullNewsInterface>()
  
  const {seo} = useParams()
  
  useEffect(() => {
    const newsdata = dfn.newsData.filter(data => data.seo === seo)
    setFullNewsData(newsdata[0] as IFullNewsInterface)
  }, [])
  console.log(fullNewsData);
  return (
    <>
        <FullNewsComponent {...fullNewsData} />
    </>
  )
}

export default FullNewsPage

выдается ошибка:

Тип "{ articleId?: number | undefined; category?: string | undefined; title?: string | undefined; seo?: string | undefined; authorData?: IUserShortData | undefined; fullText?: string | undefined; views?: number | undefined; comments?: number | undefined; publishedDate?: number | undefined; tags?: ITagsInterface[] | undef..." не может быть назначен для типа "IFullNewsInterface".
  Типы свойства "articleId" несовместимы.
    Тип "number | undefined" не может быть назначен для типа "number".
      Тип "undefined" не может быть назначен для типа "number".ts(2322)
(alias) const FullNewsComponent: (props: IFullNewsInterface) => JSX.Element
import FullNewsComponent
Reused component for rendering full article, news or blog page

в консоле при выводе в лог console.log(fullNewsData) undefined

Comments

[Kentavr16]

потому что изначально при первом рендере ты не задал значения для стейта, потому он и андефайнед.

const [fullNewsData, setFullNewsData] = useState<IFullNewsInterface>()

Почитай документацию. Там все очень хорошо описано. И о том что реакт группирует (batch) изменения стейта для оптимизации,а потому изменения видны только после ререндера, и о том как можно инициировать стейт, и много других интересностей.
Также посмотри юзЭффект и массив зависимостей. Ты задал пустой массив зависимостей для хука эффекта, а значит он отработает только один раз. Даже если значение стейта изменится при последующем рендере, ты этого не увидишь.
Уверен типы сможешь вывести когда ознакомишься с этим течением данных в компоненте.

[chemdev]

Учитывая что нет кода импортирумых элементов, я чуть запутался потому что мне кажется, что должна другая ошибка подниматься. В любом случае у тебя initial state fullNewsData является undefined. Попробуй сделать такой возврат.

...
return (
    <>
        { fullNewsData && <FullNewsComponent {...fullNewsData} />}
    </>
  )

[Александр Иванов]

chemdev, да, помогло, хотя и сам мог бы додуматься, помогите еще с одним вопросом, .map работает только с объектами? потому что в переменной tags содержится массив с двумя объектами, я по нему должен пробижаться и делаю через map мне в консоле пишет ошибку что map не функция

[chemdev]

Александр Иванов, как ты делаешь покажи код

Answer 1

[Alexandroppolus]

Классический пример, когда не нужна связка useState+useEffect

У тебя функция setFullNewsData вызывается только внутри useEffect. То есть "стейт" fullNewsData - никакой не стейт, а производное значение от квери-параметра seo. Соответственно его надо просто вычислять, скорее всего, с хуком useMemo. Впрочем, undefined при этом никуда не денется, но он совершенно по делу - неизвестно, что может быть в квери-параметре.

так что предложение проверять fullNewsData остается актуальным.

Answer 2

[chemdev]

Суммируя с информацией которую дал Kentavr16. Мгновенное решение:

...
return (
    <>
        { fullNewsData && <FullNewsComponent {...fullNewsData} />}
    </>
  )

Объяснение:

потому что изначально при первом рендере ты не задал значения для стейта, потому он и андефайнед.