React-Redux：インポート試行エラー： '/ components/Score'にデフォルトのエクスポートが含まれていません（ 'Score'としてインポートされました）

bugfix> javascript > 投稿

似たような投稿がたくさんあることは知っていますが、どれも似たような投稿はないようです。

反応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').

トリプルチェックを行いましたが、ファイルパスは正しいです。なぜこのエラーが発生するのかわかりません。

javascript

reactjs

react-native

回答 2 件

  • 私はあなたの問題はあなたが持っていることだと思います 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)

  • 2つの解決策：

    書き出す Score から index.js 内部のファイル Score フォルダ。 （からインポートした後 Score ファイル）

    削除 index.js と使用 import Score from './components/Score/Score'; に App.js

    より組織化された方法は 1 モジュールから1つの値のみを返す場合。

    エラーの理由：から値をインポートしています Score フォルダ。フォルダから値をインポートする場合、 index.js そのフォルダ内の値を返します。しかし、ここで index.js 値をエクスポートしていません。したがって、どちらかから値をエクスポートします index.js （解決策1）またはから値をインポートします Score 内部のファイル Score フォルダー（ソリューション2）

あなたの答え

関連記事