在React with Typescript中创建自定义钩子而不传递道具

Question

我是用Typescript学习React的新手，到目前为止，我读了很多关于键入道具的文章，我只是不明白如何在不传递道具的情况下创建自定义钩子，下面是一个例子：

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=((=>缺少函数的返回类型。

Answer 1

您可以尝试这样做(为了更清楚起见，我将您的示例剪切在多个文件中(：
您的钩子只添加这样的返回类型：
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;

你可以在这个沙盒中看到你的代码示例