reactjs - React 组件重新执行错误

在我的简单 react 应用程序中，有两个组件:App 和 Comments。

App.js =>

import Comments from "./comments/Comments";

const App = () => {
    return (
        <div>
            <h1>App.js</h1>
            <Comments currentUserId="1" />
        </div>
    );
};

export default App;

Comments.js =>

import { useState, useEffect } from "react";
import { getComments as getCommentsApi } from "../api";

const Comments = ({ currentUserId }) => {
    const [comments, setComments] = useState([]);
    console.log("Comments", comments);
    
    useEffect(() => {
        getCommentsApi()
        .then(data => {
            setComments(data);
        })
    }, []);
    
    return (
        <div>
            <h1>Comments.js</h1>
        </div>
    );
};

export default Comments;

如果你看一下我的评论组件，我会在函数体中记录评论，它应该执行两次，第一次是初始加载，第二次是由于 useEffect 和更改状态。

React 组件应在 props 或状态更改时重新执行

但是我的控制台中出现了 4 条日志。为什么？