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）