React中，处理传入不同参数但调用同一个API接口的情况

允蔓

于 2024-07-31 17:20:51 发布

阅读量160

点赞数 2

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/2301_81497027/article/details/140828014

版权

在React中，当需要处理传入不同参数的同一路由或组件方法调用同一个API接口的情况，可以创建一个接受任意参数并能处理不同类型的方法。（要通过接口的params来实现，因此开发过程中要减少使用路由传参。）

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

type Props<T> = {
  fetchData: (params: T) => void;
};

const CallApi = <T>(props: Props<T>) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchDataWithParams = params => {
      // 根据params的实际类型调用API
      yourApiCall({ ...params }, result => setData(result));
    };

    props.fetchData(fetchDataWithParams);
  }, [props.fetchData]);

  return (
    // 渲染或处理数据的部分
  );
};