在反应应用程序中收到“尝试导入错误：”答案

【问题标题】：Receiving "Attempted import error:" in react app在反应应用程序中收到“尝试导入错误：”
【发布时间】：2019-04-19 02:01:29
【问题描述】：

我在尝试运行我的 React 应用程序时收到以下错误：

./src/components/App/App.js
尝试导入错误：“combineReducers”
不是从 '../../store/reducers/' 导出的。

这是我导出combineReducers的方式：

import { combineReducers } from 'redux';
import userReducers from './userReducers';
import articleReducers from './articleReducers';

export default combineReducers({
    userReducers,
    articleReducers
});

这是我在App.js 中导入它的方式：

import { combineReducers } from '../../store/reducers';

我导出 combineReducers 的方式有什么问题？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

import { combineReducers } from '../../store/reducers';

应该是

import combineReducers from '../../store/reducers';

因为它是默认导出，而不是命名导出。

这两个 here 之间的差异很好地细分。

【讨论】：

【解决方案2】：

我遇到了同样的问题，但我只是在顶部输入了export 并删除了底部的默认值。向下滚动并检查 cmets。

import React, { Component } from "react";

export class Counter extends Component { // type this  
export default Counter; // this is eliminated

【讨论】：

【解决方案3】：

这是另一种选择：

export default function Counter() {

}

【讨论】：

【解决方案4】：

我想我来晚了，但是这个信息可能对我发现一些东西的人有用，这可能很简单但很重要。如果您直接在函数上使用导出，即

export const addPost = (id) =>{
  ...
 }

注意导入时需要用大括号括起来即import {addPost} from '../URL';

但是当使用导出默认值时，即

const addPost = (id) =>{
  ...
 }

export default addPost,

然后您可以不使用花括号导入，即 import addPost from '../url';

export default addPost

我希望这对像我一样困惑的人有所帮助。 ?

【讨论】：

我已经开始使用 react 进行开发......我真的发现它很有帮助。你解释得很好..谢谢

【解决方案5】：

也许我也迟到了，但组件文件夹内的文件夹也有类似的问题。我用大写字母更改了文件夹的名称。它对我有用。

【讨论】：

【解决方案6】：

如果更改导入没有帮助，也许您只需要运行 yarn install 或 npm install（或您正在使用的任何东西）并重新启动服务器。为我工作。

【讨论】：

【解决方案7】：

确保将要在组件中导出的常量变量的名称大写。当您在其他地方导入组件时，您还应该检查其首字母是否大写，因为这是 React 用来识别其组件的方式之一。

内部组件：

import React from 'react';

export const Component =  (props) => (...)

然后，在导入时：

import {Component} from '../location/file'

【讨论】：