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... 被调用两次（两行 Promise fulfilled）而 --> Authorize <--？只调用一次！

Answer 1

 <React.StrictMode>

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

因此您可以不使用 <React.StrictMode> 进行尝试，然后您会发现一条日志消息。

不过有严格模式还是不错的。您可以忽略双重日志消息。

CodeSandbox link to try it out

Answer 2

使用挂钩模拟 onMount 并仅在初始时调用它，而不是在重新渲染时调用它。在您的主页中执行：

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

JS Promise 调用了两次

JS Promise called two times

javascript

promise

reactjs