如何在React中單擊按鈕時進行API呼叫

當我單擊 Button 組件時，我想從貨幣 API 獲取資料。我已將請求資料的代碼放置在 useEffect 掛鉤中，但是當我嘗試將 useEffect 放置在 handleClickOpen 函式中時，它會回傳錯誤。我應該省略 useEEffect 嗎？我應該在下面的代碼中將 API 呼叫放在哪里？

    import * as React from 'react';
import { useEffect } from "react"
import axios from "axios"
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import DialogTitle from '@mui/material/DialogTitle';
import Dialog from '@mui/material/Dialog';
import { blue } from '@mui/material/colors';


const emails = [
  {title: "Pound sterling", symbol: "￡", id: 1, acronym: "GBP"},
  {title: "Euro", symbol: "€", id: 2, acronym: "EUR"},
  {title: "Nigerian Naira", symbol: "?", id: 3, acronym: "NGN"},
  {title: "Saudi Arabian riyal", symbol: "SR", id: 4, acronym: "SAR"},
  {title: "Indian rupee", symbol: "?", id: 5, acronym: "INR"},
  {title: "United States dollar", symbol: "$", id: 6, acronym: "USD"},

]
function SimpleDialog(props) {
  const { onClose, selectedValue, open } = props;

  const handleClose = () => {
    onClose(selectedValue);
  };

  const handleListItemClick = (value) => {
    onClose(value);

    
  };

  useEffect(() => {
    const options = {
      method: 'GET',
      url: 'https://exchangerate-api.p.rapidapi.com/rapid/latest/USD',
      headers: {
        'X-RapidAPI-Key': 'c0d2e70417msh3bde3b7dbe9e25ap12748ejsncd1fe394742c',
        'X-RapidAPI-Host': 'exchangerate-api.p.rapidapi.com'
      }
    };
    
    axios.request(options).then(function (response) {
      console.log(response.data);
    }).catch(function (error) {
      console.error(error);
    });

  },[])

  return (
    <Dialog onClose={handleClose} open={open}>
      <DialogTitle>Choose a currency</DialogTitle>
      <List sx={{ pt: 0 }}>
        {emails.map((email) => (
          <ListItem button onClick={() => handleListItemClick(email.symbol)} key={email.id}>
            <ListItemAvatar>
              <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
                {email.symbol}
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={email.title} />
          </ListItem>
        ))}

      </List>
    </Dialog>
  );
}

SimpleDialog.propTypes = {
  onClose: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
  selectedValue: PropTypes.string.isRequired,
};

export default function SimpleDialogDemo({selectedValue, setSelectedValue}) {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value) => {
    setOpen(false);
    setSelectedValue(value);
  };
 
  return (
    <div>
      
      <Button  variant="text" onClick={handleClickOpen} sx={{
         ml: 30,
         mb: 0,
         p: 0,
          }}>
        {selectedValue} {emails.find(email => email.symbol===selectedValue).acronym}
      </Button>
      <SimpleDialog
        selectedValue={selectedValue}
        open={open}
        onClose={handleClose}
      />
    </div>
  );
}

uj5u.com熱心網友回復：

只需將 API 呼叫移至單獨的函式，例如 getAPIData 或 makeAPICall。要么使用普通函式，要么使用 useCallback 來避免函式的多次創建。您現在可以在初始加載時在 useEffect 中呼叫此函式，也可以在任何其他您想要進行相同 API 呼叫的地方呼叫此函式。

使用狀態變數來存盤從 API 呼叫獲得的資料，并使用該變數來呈現 JSX 元素。

const makeAPICall = () => {
    //api call and response
    //store response in a state variable
}

useEffect(()=>{ 
    makeAPICall();
}, [])

const handleClickEvent = () => {
    makeAPICall();
}

uj5u.com熱心網友回復：

首先是 react 不推薦或允許在其他函式中使用諸如 useEffect 之類的鉤子，這就是您收到錯誤的原因。現在，由于您需要點擊資料，請將您在 useEffect 中撰寫的獲取代碼放在 ClickHandler 中（對于上面定義的場景，您不需要 useEffect ）。

const handleListItemClick = () => {
 const options = {
      method: 'GET',
      url: 'https://exchangerate-api.p.rapidapi.com/rapid/latest/USD',
      headers: {
        'X-RapidAPI-Key': 'c0d2e70417msh3bde3b7dbe9e25ap12748ejsncd1fe394742c',
        'X-RapidAPI-Host': 'exchangerate-api.p.rapidapi.com'
      }
    };
    
    axios.request(options).then(function (response) {
      console.log(response.data);
    }).catch(function (error) {
      console.error(error);
    });
}

如果您想使用獲取的這些資料，請將其添加到狀態變數中并使用它。:)

uj5u.com熱心網友回復：

我建議您使用reducer來處理此類操作，因此當您單擊按鈕時，它將分派一個狀態以在 reducer 中進行 API 獲取，并在 useEffect 中加載頁面時分派一個狀態。

標籤：反应 休息 异步 反应钩子 axios

上一篇：MicrosoftGraphRestAPI-按過去X天篩選

下一篇：如何從djangorest框架中的url獲取pk？