为什么我的数据在控制台中出现 4 次?

Question

我正在尝试使用 React 钩子从天气 API 获取数据。当我在 useEffect 挂钩后console.log数据时，它会打印到控制台 4 次，两次作为空对象。为什么？这是我的代码：

import React, {useState, useEffect} from 'react';

export default function App() {
const [data, setData] = useState({})

useEffect(() => {
fetch('https://api.weatherbit.io/v2.0/forecast/hourly?city=Chicago,IL&key=XXX&hours=24')
.then(res => res.json())
.then(response => setData(response.data))
}, []);
console.log(data)

return (
<div>
</div>
)
}

这是控制台中打印的内容：

{}

{}

(24( [{}，{}...]

(24( [{}，{}...]

Answer 1

一个渲染发生在一个空对象上，因为组件挂载了。另一个发生在数据上，因为你设置了状态。然后由于严格模式，这些都翻了一番