React-Redux：嘗試導入錯誤：“./components/Score”不包含默認導出（導入為“Score”）

Question

我知道有很多類似的帖子，但似乎沒有一個與這個相似。

使用 react redux 來使用 mapStateToProps。

在我的 App.js 中，我使用import Score from './components/Score'; 為了導入組件。

該組件位於名為 Score 的文件夾中，其中包含index.js和Score.js 。 在Score.js里面我有：

const Score = ({team_score}) => ( 
    <>  
        <p>{ team_score }</p>
    </>
);

export default Score;

在我的index.js中，我有：

import { connect } from "react-redux";
import Score from "./Score";

let mapStateToProps = (state) => {
    return {
        team_score: state.team_score,
    };
};

connect(mapStateToProps)(Score)

但我得到了錯誤：

./src/App.js
Attempted import error: './components/Score' does not contain a default export (imported as 'Score').

我已經三重檢查並且文件路徑是正確的。 我不確定為什么會收到此錯誤。

Answer 1

我認為您的問題是您在此文件夾中有index.js文件。

import Score from './components/Score'

此行將嘗試從components/Score/index.js文件中導入任何內容，並且您不會從那里導出任何內容。

您應該執行以下操作：

import { connect } from "react-redux";
import Score from "./Score";

let mapStateToProps = (state) => {
    return {
        team_score: state.team_score,
    };
};

export default connect(mapStateToProps)(Score)

Answer 2

兩種解決方案：

1. 從Score文件夾中的index.js文件中導出Score 。 （從Score文件導入后）
2. 刪除index.js並使用import Score from './components/Score/Score'; 在App.js中

如果您只從模塊返回一個值，則更好的組織方式是1 。

錯誤原因：您正在從Score文件夾中導入值。 從文件夾中導入值時，該文件夾中的index.js會返回該值。 但是這里index.js沒有導出任何值。 因此，要么從index.js中導出值（解決方案 1），要么從Score文件夾中的Score文件中導入值（解決方案 2）