为什么我的 React useEffect 钩子即使在依赖项数组为空的情况下也会运行多次？

Question

我正在开发一个 React 项目，并遇到了 useEffect 挂钩的问题。我的目标是在组件安装时仅从 API 获取数据一次。然而，useEffect 似乎运行了多次，即使我提供了一个空的依赖项数组。

这是我的代码片段：

`

import React, { useEffect, useState } from "react";
import axios from "axios";

const MyComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        console.log("Fetching data...");
        axios.get("https://jsonplaceholder.typicode.com/posts")
            .then(response => setData(response.data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            <h1>Data</h1>
            <ul>
                {data.map(item => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    );
};

export default MyComponent;

`

我已验证：

1. 没有其他组件或效果触发此 API 调用。
2. 即使重新启动我的开发服务器后，问题仍然存在。
3. 我的React版本是17.0.2。

我的问题是：-

1. 尽管使用了空依赖数组，为什么会发生这种情况？
2. 这是否与React开发中的严格模式有关？
3. 如何确保 useEffect 仅按预期运行一次？ 任何见解或建议将不胜感激！

Answer 1

这是否与React开发中的严格模式有关？

是的，当您将应用程序封装在中时，就会发生这种情况。最有可能在 Index.js 中