Question

请，有人可以帮助我吗？ JavaScript可以正常工作，但是带有这些错误的类型... 我不知道该怎么办！

const Dasboard: React.FC = () => {

const [repositories, setRepositories] = useState([]);

 useEffect(async (props: any) =>  {
      const response = await fetch('https://deckofcardsapi.com/api/deck/new/');
        const data = await response.json();
        setRepositories(data);

    }),[];



return(
<>


  <Container>

  {repositories.map(repo => (
    <li key={repo}>

    </li>
  ))

  }

  </Container>


  </>

);
}


export default Dasboard;

Answer 1

使用useEffect，您应该返回一个拆解函数，或者什么也不返回。但是，由于您使用的是异步函数，因此您返回的是一个Promise，因此打字稿指出了您对useEffect的滥用。

相反，在传递给useEffect的函数中创建异步函数，然后将其调用：

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://deckofcardsapi.com/api/deck/new/');
    const data = await response.json();
    setRepositories(data);
  };
  fetchData();
}, []);

如果愿意，可以将其用作立即调用的函数表达式：

useEffect(() => {
  (async () => {
    const response = await fetch('https://deckofcardsapi.com/api/deck/new/');
    const data = await response.json();
    setRepositories(data);
  })();
}, []);

Answer 2

传递给useEffect的回调不能是{ // ... overrides: [ { files: ['*.ts', '*.tsx'], // Your TypeScript files extension parserOptions: { project: ['./tsconfig.json'], // Specify it only for TypeScript files }, } ], parser: '@typescript-eslint/parser', // ... }函数。

要在async内进行async的操作，可以采用以下方法：

useEffect

This article提供了更多详细信息。

我在打字稿中的异步功能有问题

2 个答案: