使用 API 的 React 中发生了太多的重新渲染

Posted 2023-02-22

【中文标题】使用 API 的 React 中发生了太多的重新渲染

【英文标题】：Too much rerendering happeing in React with APIs

【发布时间】：2021-12-26 20:59:57

【问题描述】：

我只是 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  />
                                </TableCell>
                            </TableRow>
                        ))
                    </TableBody>
                </Table>
            </TableContainer>
        </div>
    );
;

export default Home;

【参考方案1】：

您的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);
            
        );
, []);

【讨论】：

非常感谢！