ReactJS：如何在按鈕點擊時調用異步函數？

Question

如何在單擊按鈕時調用 fetchData()？ 我應該使用 useEffect 調用函數嗎？

function Subscriptions() {
  const [allUsers] = useState([]);
  useEffect(() => {
    fetchData = async () => {
      try {
       // some code
      } catch (err) {
        console.log(err);
      }
    };
  }, []);
  return (

<Button onclick={fetchData()}>Fetch Data</Button>

);
}
export default Subscriptions;

                                                                                                                   

Answer 1

fetchData位於不同的嵌套 scope 中，因此按鈕組件無法訪問。 使用useCallback定義異步回調：

import React, { useState, useCallback } from "react";

function Subscriptions() {
  const [allUsers] = useState([]);
  const fetchData = useCallback(async () => {
    try {
      // some code
    } catch (err) {
      console.log(err);
    }
  }, []);
  return <Button onClick={fetchData}>Fetch Data</Button>;
}
export default Subscriptions;

Answer 2

useEffect 掛鈎在加載時調用。 你應該在 useEffect 之外定義 fetchData function 實際上你不需要 useEffect 這種情況

Answer 3

你必須制作一個 function 然后在 useEffect 中調用兩次以及 onClick。

function Subscriptions() {
      const [allUsers] = useState([]);
      const fetchData = async () => {
         try {
           // some code
         } catch (err) {
            console.log(err);
         }
      };      
     useEffect(() => {
      fetchData()
     }, []);
      return (
        <Button onclick={()=>fetchData()}>Fetch Data</Button>
      );
    }
    export default Subscriptions;