我创建了一个带有选项卡的页面,我想显示来自不同 API 端点的数据。我创建了一个选项卡,并试图将数据呈现到相应的选项卡中。我正在使用钩子来实现这一点。在社区成员的帮助下,我创建了一个选项卡并将该选项卡导航到正确的索引位置。现在我正在尝试将相应的 API 数据呈现到相应的选项卡中。如果我在 useEffect 中设置 state 和依赖项,我可以看到这些值不断命中 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;
答案 0 :(得分:0)
看起来您在 useEffect
钩子中创建了几个依赖循环。如果您注意到,您的 useEffect 依赖于 page
,并且您还在该钩子中调用 setPage
。每次 page
更改时钩子都会运行,并且由于 setPage
更改了钩子中的 page
,因此它创建了一个无限循环。对于依赖它并调用 setPrfData 的 prfData 也是如此。
在不知道您对应用程序的确切需求的情况下,我会假设您可能不需要在钩子中将 page 设置为 data
并且可能不需要依赖于 {{1 }}。去掉这两个东西,代码看起来是这样的:
prfData