在选项卡内呈现 API 数据

Question

我创建了一个带有选项卡的页面，我想显示来自不同 API 端点的数据。我创建了一个选项卡并尝试将数据呈现到相应的选项卡中。我正在使用钩子来实现这一点。在社区成员的帮助下，我创建了一个选项卡并将选项卡导航到正确的索引位置。现在我正在尝试将各自的 API 数据呈现到各自的选项卡中。如果我在 useEffect 中设置状态以及依赖项，我可以看到这些值不断地撞击 DOM 树。谁能指导我如何从各自的端点将数据填充到各自的选项卡中。提前致谢。

我的终点是：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";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

const Tabb = () => {
  const [page, setPage] = useState(0);
  const [prfData, setPrfData] = useState({});

  console.log("Page", page);

  useEffect(() => {
    const url = `https://reqres.in/api/users?page=${page}`;
    console.log("URL", url);

    fetch(url)
      .then((results) => results.json())
      .then((resp) => {
        console.log("response", resp);
        // setPage({ page: data.data });
        // setPage(resp.data);
        setPrfData(resp.prfData);
        setPage(resp.data);
      });
  }, [page, prfData]);

  const handleChange = (event, newValue) => {
    console.log("new", newValue);
    setPage(newValue);
  };

  function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      "aria-controls": `simple-tabpanel-${index}`,
    };
  }

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

      <Paper square>
        <Tabs
          textColor="primary"
          indicatorColor="primary"
          onChange={handleChange}
          value={page}
        >
          <Tab label="Item One" {...a11yProps(0)}></Tab>
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
        {/* <h3>Tab NO: {value} clicked!</h3> */}
        <TabPanel value={page} index={0}>
          <span>{JSON.stringify(prfData)}</span>
        </TabPanel>
        <TabPanel value={page} index={1}>
          Item Two
        </TabPanel>
      </Paper>
    </div>
  );
};

export default Tabb;

Answer 1

看起来您在 useEffect 挂钩中创建了几个依赖循环。如果您注意到，您在 useEffect 中依赖于page，并且您还在该挂钩中调用了setPage。每次page 更改时，钩子都会运行，并且由于setPage 在钩子中更改page，它会创建一个无限循环。对于您依赖它并调用 setPrfData 的 prfData 也是如此。

在不知道您对应用程序的确切需求的情况下，我会假设您可能不需要在您的钩子中将页面设置为data，并且可能不需要依赖prfData。去掉这两个东西，代码如下：

// ...
console.log("Page", page);

  useEffect(() => {
    const url = `https://reqres.in/api/users?page=${page}`;
    console.log("URL", url);

    fetch(url)
      .then((results) => results.json())
      .then((resp) => {
        console.log("response", resp);
        // setPage({ page: data.data });
        // setPage(resp.data);
        setPrfData(resp.prfData);
      });
  }, [page]);

  const handleChange = (event, newValue) => {
// ...