Question

基本上我已经创建了一个用于api调用的自定义组件

import React, {useState, useEffect} from 'react';
import axios from 'axios';

export const useFetch = config => {
  const [Response, setResponse] = useState({});
  const [Error, setError] = useState({});
  const [ShowModal, setShowModal] = useState(false);
  const [ShowLoader, setShowLoader] = useState(false);

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

  const callAPI = () => {
    setShowLoader(true);
    axios(config)
      .then(res => {
        console.log('==>>', res);
        if (res.status == 200) {
          setShowLoader(false);
          setResponse(res.data);
        }
      })
      .catch(err => {
        console.log('==>>', err.response);
        setError(err.response.data);
        setShowLoader(false);
        setShowModalErrorMessage(err.response.data.error);
        setShowModal(true);
      });
  };

  return {Response, Error, ShowModal, ShowLoader};
};

在此帮助下，如果我将其与component中的useEffect / componentDidMount结合使用，我可以调用api并获得响应。但是如何在单击按钮时使用相同的方法来调用不同的api。有可能吗？

我遵循了此=> post

Answer 1

在Sub AutoNumberDecimals() Dim sh As Worksheet, Rng As Range, C As Range, Lrow As Long, i As Long Set sh = ActiveSheet 'Worksheets("Union") Lrow = sh.cells(Rows.count, 1).End(xlUp).Row Set Rng = sh.Range("A2:A" & Lrow) For Each C In Rng.cells If C.Value = "" And (C.Offset(1, 0).Value <> _ Int(C.Value Or C.Offset(1, 0).Value = "")) Then C.Value = C.Offset(-1, 0).Value + 0.01 End If Next C End Sub中添加setUrl方法（可以扩展到setConfig）。 Here working demo for this in stackblitz

useFetch

在按钮上单击，设置URL（扩展为配置）

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const useFetch = ({}) => {
  const [Response, setResponse] = useState({});
  const [Error, setError] = useState({});
  const [ShowModal, setShowModal] = useState(false);
  const [ShowLoader, setShowLoader] = useState(false);
  const [url, setUrl] = useState("");

  useEffect(() => {
    if (url) {
      console.log('making request ', url);
      callAPI();
    }
  }, [url]);

  const callAPI = () => {
    setShowLoader(true);
    axios(url)
      .then(res => {
        console.log('==>>', res);
        if (res.status == 200) {
          setShowLoader(false);
          setResponse(res.data);
        }
      })
      .catch(err => {
        console.log('==>>', err.response);
        setError(err.response.data);
        setShowLoader(false);
        setShowModalErrorMessage(err.response.data.error);
        setShowModal(true);
      });
  };

  return {Response, Error, ShowModal, ShowLoader, setUrl};
};

export default useFetch;

Answer 2

使用提取方法的常见Request.js文件

Request（“ POST”，“ http：// localhost / users / user”，{'name'：“”，'add'：“”}）

export default function Request(reqMethod, endPointUrl, bodyData) {   
 if (reqMethod === "POST") {
     return fetch(endPointUrl, {
        method: reqMethod,
        body: JSON.stringify(bodyData),
      })
  .then((response) => {
    return response.json();
  })
  .catch(() => {
    localStorage.clear();
  });
 } else if (reqMethod === "GET") {
    return fetch(endPointUrl, {
    method: reqMethod,
    })
  .then((response) => {
    return response.json();
  }).catch(() => {
    localStorage.clear();
  });
 }
}

如何在同一组件中多次使用自定义组件

2 个答案: