Estaba desarrollado una App en react Native bastante sencilla que hace una llamada a una API de noticias, y tiene que cargar diferente información en la pantalla principal.
El problma ue me ha surgido ha sido al intentar implementar un Custom Hook, que se encarge de recoger todos los atributos necesarios para crear la interfaz que coecta con la API.
El error que me aparece es el siguiente:
Property 'description' does not exist on type 'void'.
Property 'title' does not exist on type 'void'.
Property 'urlToImg' does not exist on type 'void'.
El código de mi HomeComponent es el siguiente:
HomeComponent.tsx:
import React, {useState} from 'react';
import {
Image,
ScrollView,
Text,
View,
FlatList,
ActivityIndicator,
} from 'react-native';
import {useNews} from '../hooks/useNews';
import {New, NewDBResponse} from '../interfaces/newsInterface';
import {title} from 'process';
export const HomeComponent = () => {
const [isLoading, setIsLoading] = useState(true);
const {title, description, urlToImg} = useNews();
if (isLoading) {
return (
<View>
<ActivityIndicator color="red" size={100} />
</View>
);
}
return (
<>
<View style={{alignContent: 'center'}}>
<Text>
Title:
{title}
</Text>
<br />
<Text>Description: {{description}}</Text>
<br />
<Image source={urlToImg}></Image>
</View>
</>
);
};
Este seria el código de mi custom hook:
useNews.tsx
import {useEffect, useState} from 'react';
import newsDB from '../api/newsDB';
import {NewDBResponse} from '../interfaces/newsInterface';
interface NewsState {
title: string[];
description: string[];
urlToImage: string[];
pagination: number;
}
export const useNews = () => {
const [isLoading, setIsLoading] = useState(true);
const [newsState, setNewsState] = useState<NewsState>({
title: [],
description: [],
urlToImage: [],
pagination: 3,
});
//Método principal.
const getNews = async () => {
const titlePromise = newsDB.get<NewDBResponse>('/title');
const descriptionPromise = newsDB.get<NewDBResponse>('/description');
const imgPromise = newsDB.get<NewDBResponse>('/urlToImage');
const [titleResp, descriptionResponse, imgResponse] = await Promise.all([
titlePromise,
descriptionPromise,
imgPromise,
]);
setNewsState({
title: titleResp.data.title,
description: descriptionResponse.data.description,
urlToImage: imgResponse.data.urlToImage,
pagination: 3,
});
setIsLoading(false);
useEffect(() => {
getNews();
}, []);
return {
...newsState,
isLoading,
};
};
};
Y finalmente el archivo json que estoy utilizando con el public Paste JSON as Code es el siguiente:
// Generated by https://quicktype.io
export interface NewDBResponse {
title: string[];
description: string[];
urlToImage: string[];
pagination: number;
data: New[];
}
export interface New {
author: null | string;
title: string;
description: string;
url: string;
source: string;
image: null | string;
category: Category;
language: Language;
country: string;
published_at: string;
}
export enum Category {
General = 'general',
}
export enum Language {
Ar = 'ar',
En = 'en',
}
````````````````````````````````````````````````````````````````````````````````````````````````
Espero puedan ayudar y si es asi, muchas gracias de ante mano!.