reactjs - Crear un hook personalizado sin pasar props en React con Typescript
Soy nuevo en aprender React con Typescript y hasta ahora, he leído mucho sobre tipar props y simplemente no entiendo cómo crear un hook personalizado sin tener que pasar props, aquí hay un ejemplo:
import { useState, useEffect, FunctionComponent, ReactElement } from 'react';
import axios from 'axios';
interface PostData {
userId: number,
id: number,
title: string,
body: string
}
const usePosts = () => {
const [posts, setPosts] = useState<PostData[]>([]);
const getPosts = () => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
})
};
useEffect(() => {
getPosts();
}, []);
return {
posts,
};
};
export default usePosts;
En este caso, ESlint está diciendo que const usePosts =() => ... le falta el tipo de retorno en la función.
Respuesta #1
puedes probar esto (corté tu ejemplo en varios archivos para más claridad):
tus hooks solo agregan el tipo de retorno así:
usePost.hook.tsx
import { useState, useEffect } from 'react';
import axios from 'axios';
interface PostData {
userId: number,
id: number,
title: string,
body: string
}
const usePosts = ():PostData[] => {
const [posts, setPosts] = useState<PostData[]>([]);
const getPosts = () => {
axios.get<PostData[]>('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data)
setPosts(response.data)
})
.catch(error => {
console.error(error);
})
};
useEffect(() => {
getPosts();
}, []);
return posts;
};
export default usePosts;
puedes ver un ejemplo de tu código en este sandbox
