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

【问题标题】：How to use custom component multiple times in same component如何在同一个组件中多次使用自定义组件
【发布时间】：2020-08-10 09:27:57
【问题描述】：

基本上我已经为 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};
};

在这方面的帮助下，如果我将它与组件中的 useEffect/componentDidMount 一起使用，我可以调用 api 并获得响应。但是如何使用相同的方法在按钮单击时调用不同的 api。有可能吗？

我关注了这个=> post

【问题讨论】：

不同的api...不同的配置？
取决于您所说的不同 API 的含义，也许将 config 作为参数传入？
@DennisVash 是不同的 api/config

标签： javascript reactjs react-native react-hooks

【解决方案1】：

在useFetch 中添加setUrl 方法（可以扩展为setConfig）。 Here working demo for this in stackblitz

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;

点击按钮，设置 url（扩展为配置）

import React, {useState, useEffect} from 'react';
import useFetch from './use-fetch';

export default ({ name }) => {
  const {Response, Error, ShowModal, ShowLoader, setUrl } = useFetch({});


 return (<div>
  <button key={'1'} onClick={() => setUrl("http://foo/items")}> Request 1 </button>
  <button key={'2'} onClick={() => setUrl("http://foo/other")}> Request 2 </button>
 </div>)

};

【讨论】：

@rishikesh_07, 刚刚发现一篇文章medium.com/swlh/usefetch-a-custom-react-hook-36d5f5819d8 的概念几乎相似。 Infact 文章列出了更多细节。

【解决方案2】：

使用 fetch 方法的通用 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();
  });
 }
}

【讨论】：