Блог

Я новичок в изучении React с помощью Typescript, и до сих пор я много читал о наборе реквизитов, и я просто не понимаю, как создать пользовательский хук без необходимости передавать реквизит, вот пример:

 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 = () => … отсутствует возвращаемый тип в функции.

вы можете попробовать это (я вырезал ваш пример в нескольких файлах для большей ясности):
ваши хуки просто добавляют возвращаемый тип следующим образом:
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;

 

вы можете увидеть пример вашего кода в этой изолированной среде