我是用 Typescript 学习 React 的新手,到目前为止,我已经阅读了很多关于输入 props 的内容,但我不明白如何创建自定义钩子而不必传递 props,这是一个例子:
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;
在这种情况下,ESlint 说 const usePosts = () => ... 是缺少函数的返回类型。
答案 0 :(得分:2)
你可以试试这个(为了更清楚,我把你的例子分成了多个文件):
你的钩子只是添加这样的返回类型:
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;
您可以在此 sandBox
中看到您的代码示例