反應 - 錯誤：嘗試導入錯誤/應用程序'不包含默認導出（導入為'應用程序'

Question

返回錯誤：./src/index.js 嘗試導入錯誤：'./App' 不包含默認導出（導入為 'App'）。

import React, { Component, useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

  const  increment = () => {
        setCount(count + 1);
    };

    return (
      <div>
          <h2> counter app </h2>
          <button onClick={increment}>Clicked {count} times</button>
      </div>
    );
};

指數

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

在 Nodejs 中，要在另一個文件中使用變量或 function，您必須導出它們。 我們有兩種類型的出口。

1. 使用導出常量

// Export a variable
export const App = () => { ... }

// Import App in another file
import { App } from '...'

2. 使用導出默認值

// Export default
const App = () => { ... }
export default App

// Import App in another file
import App from '...'

按照我的示例並查看您的代碼。 您缺少 export App to 可以在另一個文件中使用此變量。

因此，在您的情況下，您必須導出App以在index.js中使用：

import React, { Component, useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

  const  increment = () => {
        setCount(count + 1);
    };

    return (
      <div>
          <h2> counter app </h2>
          <button onClick={increment}>Clicked {count} times</button>
      </div>
    );
};
export default App

請記住，您在一個文件中只有一個導出默認值。

Answer 2

import React, { Component, useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

  const  increment = () => {
        setCount(count + 1);
    };

    return (
      <div>
          <h2> counter app </h2>
          <button onClick={increment}>Clicked {count} times</button>
      </div>
    );
};

export default App;

Answer 3

import openSocket from 'socket.io-client';

class Socket {
  constructor() {
    this.socket = openSocket('http://localhost:8080');
    this.socket.emit("connection", 1000);
  }
}

export default new Socket();


import socketService  from "../../services/socketService";

socketService.socket.on("new-order", (result) => {
  if (result.data) {
    console.log('order page',result.data);
    let x = [...records];
    x.unshift(result.data);
    setRecords(x);
  }
});

Answer 4

我也有同樣的出口問題

 // 1.)when defining with below syntax // Use the following syntax for import import { App } from '...'; // 2.)when defining with below syntax function App = () => { } export default App //Use the following syntax for import import App from '...';