useEffect未運行Windows10React-有解無憂

在 Windows 10 上全新安裝create-react-app專案，useEffect 不起作用。

在 App 函式中注入以下代碼進行測驗：

useEffect(() => {
  console.log('effect');
});

啟動應用程式后，我在運行命令的終端中看不到任何輸出，npm start而以前在 Linux 機器上可以看到。

編輯：

創建后添加的全新 create-react-app useEffect：

import {useEffect} from 'react'

import logo from './logo.svg';
import './App.css';

function App() {

  
  useEffect(() => {
    console.log('effect');
  });
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

得到以下輸出：

Compiled successfully!

You can now view test in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.30.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/ 1.49 MiB
  asset static/js/bundle.js 1.48 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.87 KiB [emitted] 1 related asset
  asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
cached modules 1.36 MiB [cached] 105 modules
runtime modules 31.3 KiB 15 modules
./node_modules/webpack-dev-server/client/index.js?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&reconnect=10 6.59 KiB [built] [code generated]
webpack 5.66.0 compiled successfully in 3028 ms

uj5u.com熱心網友回復：

只需創建一個新的功能組件并將其作為子組件放入 App.js 中。將其用作所有其他組件的包裝器（作為父級）。

uj5u.com熱心網友回復：

這種新的設定作業正常：

import { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  useEffect(() => {
    console.log('Working?');
  });

  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411254.html

標籤：

上一篇：Windows中的setenv等價物是什么？

下一篇：Windows備用資料流的替代方案