React-Redux：尝试导入错误：'./components/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并在App.js中使用import Score from './components/Score/Score';

如果您只从一个模块返回一个值，则1是组织得更好的方法。

错误原因：您正在从Score文件夹导入值。从文件夹导入值时，该文件夹中的index.js将返回该值。但这里index.js没有导出任何值。因此，从index.js导出值(解决方案1(或从Score文件夹(解决方案2(内的Score文件导入值