reactjs - 使用 API 的 React 中发生了太多的重新渲染
问题描述
我只是 React 的初学者,正在学习如何将 API 与 React 一起使用。
我的问题是在我的代码中发生了太多的重新渲染。console.log("test");
我是在添加行时才知道的。
我应该怎么做才能克服这个问题?
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
const Home = () => {
const [data, setData] = React.useState([]);
useEffect(() => {
fetch("https://61924463aeab5c0017105ebe.mockapi.io/test")
.then((res) => res.json())
.then(
(result) => {
if (result) {
console.log("test");
setData(result);
}
},
(error) => {
console.log(error);
}
);
});
return (
<div>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center">ID</TableCell>
<TableCell align="center">Name</TableCell>
<TableCell align="center">Avatar</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell align="center">{row.id}</TableCell>
<TableCell align="center">{row.name}</TableCell>
<TableCell align="center">
<img src={row.avatar} width="25" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
};
export default Home;
解决方案
useEffect
每次在组件内部发生渲染时,您都会被执行。
您需要在中添加空依赖项,useEffect
以便它不会被第二次执行。
useEffect(() => {
fetch("https://61924463aeab5c0017105ebe.mockapi.io/test")
.then((res) => res.json())
.then(
(result) => {
if (result) {
console.log("test");
setData(result);
}
},
(error) => {
console.log(error);
}
);
}, []);
推荐阅读
- azure-data-factory-2 - 从 Azure 数据工厂日志中提取数据
- winforms - Devexpress 绑定列表不刷新 GridControl
- node.js - Mongodb仅在ID不存在时才创建文档
- python-3.x - 使用 python3.7 在 ubuntu 16.04 上安装 python functools32 时出错
- function - Flutter:如何调用状态类中的函数或访问状态类属性?
- javascript - 如果属性与另一个数组匹配,则检索数组中的对象
- angularjs - 如何在 Angular js 中集成条带支付网关
- c# - when should i use parallel foreach and when should i use parallel linq?
- ios - API.swift 文件未更新:Apollo GraphQL iOS
- google-apps-script - 向复制的列添加时间戳