Axios调用在react功能组件中运行两次

Question

为什么要打印两次?当axios调用放在函数外部时，它只运行一次。

function App() {
axios('https://www.google.com/').then(x => 
console.log("fetched")
)
return (
<div className="App">
</div>
);
}
export default App;

Answer 1

在useEffect钩子中执行。

function App() {
React.useEffect(() => {
axios('https://www.google.com/').then(x => 
console.log("fetched")
)
}, [])
return (
<div className="App">
</div>
);
}
export default App;

Answer 2

如果你想让一个调用在组件渲染时只运行一次，你应该把它放在一个useEffect中。

useEffect(() => {
axios('https://www.google.com/').then(x => 
console.log("fetched")
);
},[]);