Как исправить ошибку в ts undefined?

Question

[luxurypluxury]

Я получаю данные с апи и помещаю их в стейт. Но компонент который принимает данные этого стейта ругается что тип данных string не может быть undefined.

Делал проверку существует ли анимэ, ошибки не было, но тогда скелетоны не работали. Это из-за того что пока массив который я получаю не будет, то страница не рендерится.

Как это исправить?

type AnimeState = {
    id: string,
    title: string,
    imageUrl: string,
    rating: number,
    genre: string,
    description: string,
    screenshots: string[],
    videoUrl: string
}

useEffect(() => {
        (async () => {
            try {
                setIsLoading(true);
                const { data } = await axios.get<AnimeItem>(API_URL + id);
                setAnime(data);
                setIsLoading(false);
            } catch (error) {
                alert('An error occured');
                navigate('/Animenia/');
            }
        })();
    }, [])

    const [anime, setAnime] = useState<AnimeState>();

Вот сама ошибка:

Comments

[Алексей Ярков]

А в AnimeItem что?

[luxurypluxury]

Алексей Ярков,

export type AnimeItem = {
    id: string,
    title: string,
    imageUrl: string,
    rating: number,
    genre: string,
    description: string,
    screenshots: string[],
    videoUrl: string
}

[Алексей Ярков]

luxurypluxury, то же самое что и AnimeState?

[Алексей Ярков]

Судя по ошибке она не в этом куске кода

[luxurypluxury]

Алексей Ярков, да

[luxurypluxury]

Алексей Ярков, просто нужно какую-то проверку сделать, а вот какую мозги не доходят :(

[Алексей]

Ну как минимум, у тебя в AnimeBlockProps свойство imageUrl может быть undefined, т.е. в качестве пропов может не передаваться. А в AnimeState оно обязательное string. Естественно, будет ошибка.
Если в компоненте те же пропы, что из апи возвращаются, то делать их обязательными тогда, если не все, то использовать Partial, чтобы сделать некоторые свойства типа необязательными.