Question

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

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;

您可以在此 sandBox

中看到您的代码示例

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

1 个答案: