我对打字稿中的异步函数有疑问答案

【问题标题】：I have a problem with the async function in typescript我对打字稿中的异步函数有疑问
【发布时间】：2021-02-05 19:49:04
【问题描述】：

请问，谁能帮帮我？ JavaScript 工作正常，但是这些错误的类型... 我不知道该怎么办了！

enter image description here

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;

【问题讨论】：

这能回答你的问题吗？ React TypeScript 16.8 How to make useEffect() async

标签： typescript

【解决方案1】：

使用useEffect，您要么应该返回一个拆解函数，要么什么都不返回。但是由于您使用的是异步函数，因此您正在返回一个承诺，因此 typescript 指出您滥用了 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);
  })();
}, []);

【讨论】：

【解决方案2】：

传递给 useEffect 的回调不能是 async 函数。

要在useEffect 中做某事async，您可以采用这种方法：

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

   getData()
},[]);

This article 提供更多详细信息。

【讨论】：