【问题标题】：How to call API inside switch case如何在 switch case 中调用 API
【发布时间】：2021-06-08 02:03:42
【问题描述】：

我创建了一个选项卡组件，其中有三个选项卡，每个选项卡将包含来自不同端点的数据。因为我有不同的端点，所以我计划使用 switch case 来访问 API。我创建了一个 onChange 函数，我曾经在其中调用三个不同的端点，不幸的是我无法获得结果，我收到错误消息，指出不能在 onChange 中使用 useEffect。谁能指导我实现结果。提前致谢。

我正在使用的 API 是：https://reqres.in/api/users?page=1、https://reqres.in/api/users?page=2、https://reqres.in/api/users?page=3

import React, { useState, useEffect } from "react";
import Paper from "@material-ui/core/Paper";
import Tab from "@material-ui/core/Tab";
import Tabs from "@material-ui/core/Tabs";

const Tabb = () => {
  const [profileData, setProfileData] = useState(0);

  useEffect(() => {
    fetch("https://reqres.in/api/users?page=1")
      .then((results) => results.json())
      .then((data) => {
        console.log("data", data);
      });
  });

  const handleChange = (e, value) => {
    switch (value) {
      case 0:
        break;

      case 1:
        break;

      case 2:
        break;

      default:
        break;
    }
    setProfileData(value);
  };

  return (
    <div style={{ marginLeft: "40%" }}>
      <h2>Tbas in React JS</h2>

      <Paper square>
        <Tabs
          value={profileData}
          textColor="primary"
          indicatorColor="primary"
          onChange={handleChange}
        >
          <Tab label="Tab One" />
          <Tab label="Tab Two" />
          <Tab label="Tab Three" />
        </Tabs>
        {/* <h3>Tab NO: {value} clicked!</h3> */}
      </Paper>
    </div>
  );
};

【问题讨论】：

我认为在这种情况下不需要switch 块

标签： reactjs react-hooks material-ui

【解决方案1】：

您有一个 API 具有不断变化的页面参数。每当您设置页面（标签更改）时，使用页面编号更新状态。

将page 设置为useEffect() 依赖项，因此每当页面更改时都会发出API 调用。将当前页面添加到当前url的基本查询url。

演示 - 在选择菜单中选择一个选项卡：

const { useState, useEffect } = React;

const Paper = 'div';
const Tabs = 'select';
const Tab = ({ label, ...rest }) => (<option {...rest}>{label}</option>);

const Demo = () => {
  const [page, setPage] = useState(0);

  useEffect(() => {
    const url = `https://reqres.in/api/users?page=${page}`;
  
    fetch(url)
      .then((results) => results.json())
      .then((data) => {
        console.log("data", data);
      });
  }, [page]);

  const handleChange = e => {  
    setPage(+e.target.value);
  };

  return (
    <Paper>
      <Tabs onChange={handleChange}>
        <Tab label="Tab One" value={1} />
        <Tab label="Tab Two" value={2} />
        <Tab label="Tab Three" value={3} />
      </Tabs>
      {/* <h3>Tab NO: {value} clicked!</h3> */}
    </Paper>
  );
};

ReactDOM.render(
  <Demo />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

如果我了解您的问题/问题，您希望通过switch 语句有条件地获取一些数据并更新状态。

问题

没有依赖关系的useEffect 在每个渲染周期都会被调用。这可能不是你想要的。
您不能有条件地在循环和回调中调用钩子，它们只能从反应函数和其他自定义钩子中调用。

解决方案

我认为您根本不需要 useEffect 挂钩，您可以定义一个函数来处理 fetch，或者更好的是，只需在 onClick 处理程序中使用单个 fetch。

const handleChange = (e, value) => {
  let url;
  switch (value) {
    case 0:
    default:
      url = "https://reqres.in/api/users?page=1";
      break;

    case 1:
      url = "https://reqres.in/api/users?page=2";
      break;

    case 2:
      url = "https://reqres.in/api/users?page=3";
      break;
  }

  fetch(url)
    .then((results) => results.json())
    .then((data) => {
      console.log("data", data);
    });

  setProfileData(value);
};

您可以进一步简化这一点，switch case 基本上只是将1 添加到value 并形成url。只需使用字符串模板来形成请求 URL。

const handleChange = (e, value) => {
  fetch(`https://reqres.in/api/users?page=${value + 1}`)
    .then((results) => results.json())
    .then((data) => {
      console.log("data", data);
    });

  setProfileData(value);
};

【讨论】：