JS Promise打了两次电话

Question

具有如此超简单的CRA应用程序：

/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './components/Home';
ReactDOM.render(
<React.StrictMode>
<Home></Home>
</React.StrictMode>,
document.getElementById('root')
);

/components/Home.tsx:

function Authorize () {
console.log("--> Authorize  <--")
let myPromise = new Promise(function(myResolve, myReject) {

let x = 0;          

if (x === 0)
myResolve("OK");
else 
myReject("Error");          
});     
myPromise.then(
function(value) {console.log("--> Promise fulfilled <--")},
);
}
function Home() {    
Authorize()    
return (<div><b>Home Page</b></div>)
}
export default Home

当我通过npm start启动应用程序时我得到：

--> Authorize  <--
--> Promise fulfilled <--
--> Promise fulfilled <--

我的问题是为什么myPromise.then...被称为TWICE(两行Promise fulfilled(而--> Authorize <--？只调用一次！

Answer 1

<React.StrictMode>

触发双重渲染，以便让我们发现是否有任何不安全的操作正在进行。这不会在生产构建中发生。

所以你可以在没有<React.StrictMode>的情况下尝试，然后你会发现一条日志消息。

但有严格的模式是好的。您可以忽略双日志消息。

CodeSandbox链接试用

Answer 2

使用钩子模拟onMount，并仅在初始调用它，而不在重新渲染时调用它。在你的家里做：

useEffect(() => {
Authorize() 
}, []);
return (<div><b>Home Page</b></div>)