JS Promise 被调用了两次答案

【问题标题】：JS Promise called two timesJS Promise 被调用了两次
【发布时间】：2021-04-09 04:19:02
【问题描述】：

拥有如此超级简单的 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 <--？只调用一次！

【问题讨论】：

React 组件在开发时在严格模式下渲染两次
@Andy Ray “你正在开发中”是什么意思？
@Daros911 当您运行开发服务器而不是生产构建时。例如。 react-scripts 启动 vs 构建。

标签： javascript reactjs promise

【解决方案1】：

 <React.StrictMode>

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

所以你可以尝试不使用<React.StrictMode>，然后你会发现单个日志消息。

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

CodeSandbox link to try it out

【讨论】：

【解决方案2】：

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

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

【讨论】：