老师，请问一下这是出了什么问题啊？困扰我很久了

Question

这是这一节我的代码截图，然后上面报错之后，我反复对比了很久不知道错哪了

在这里输入代码
[**index.js**]
import React from 'react';
import ReactDom from 'react-dom';

import { Provider } from 'react-redux';

import Container from './Main/Container.jsx';

import { store，history } from './store.js';

import { ConnectedRouter } from 'react-router-redux';


ReactDom.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Container />
        </ConnectedRouter>
        </Provider>,
    document.getElementById('root')
);


[**store.js**]
import { createStore,applyMiddleware } from 'redux';
import mainReducer from './reducers/main.js';
import thunk from 'redux-thunk';
import createHistory from 'history/createHashHistory'
import { routerMiddleware } from 'react-router-redux'

// 创建基于hash的history
const history = createHistory();

// 创建初始化tab
history.replace('home');

// 创建history的Middleware
const historyMiddl = routerMiddleware(history);
const store = createStore(mainReducer, applyMiddleware(thunk,historyMiddl));

if (module.hot) {
    module.hot.accept('./reducers/main', ()=>{
        const nextRootReducer = require('./reducers/main.js').default;
        store.replaceReducer(nextRootReducer)
    });
}
module.exports = {
    store,
    history
}

**[main.js]**
import tabReducer from './tabReducer.js';
import categoryReducer from './categoryReducer.js';
import contentListReducer from './contentListReducer.js';
import orderReducer from './orderReducer.js';
/* import scrollViewReducer from 'component/ScrollView/scrollViewReducer.js'; */

import { combineReducers } from 'redux';

import { routerReducer } from 'react-router-redux';

const reducers = combineReducers({
    tabReducer,
    categoryReducer,
    contentListReducer,
    orderReducer,
    router: routerReducer
});
export default reducers;

[main.jsx]
import React from ‘react’;
import { connect } from ‘react-redux’;

import { Route, withRouter } from ‘react-router-dom’;

import BottomBar from ‘…/BottomBar/BottomBar.jsx’;
import Home from ‘…/Home/Home.jsx’;
import Order from ‘…/Order/Order.jsx’;

import My from ‘…/My/My.jsx’;

class Main extends React.Component{
constructor(props){
super(props);

}
render(){
    return (
        <div>
            <Route path="/home" exact component={Home} />
            <Route path="/order" component={Order} />
            <Route path="/my" component={My} />
            <BottomBar />
        </div>
    );
}

}
export default withRouter(connect(
/* state =>({

}) */

)(Main));

[BottomBar]
import ‘./BottomBar.scss’;

import React from ‘react’;
import { connect } from ‘react-redux’;

import { NavLink, withRouter } from ‘react-router-dom’;

/* import { changeTab } from ‘…/actions/tabAction.js’; */

/**

• @constructor

• @description 首页底部tab栏
  */
  class BottomBar extends React.Component{
  constructor(props){
  super(props)
  }
  changeTab(item){

   this.props.history.push(item.key);
  

  }
  renderItems(){
  let tabs = this.props.tabs;
  return tabs.map((item,index)=>{
  let cls = item.key + ’ btn-item’;
  let name = item.name;

       return(
           <div key={index} className={cls}>
               <NavLink to={"/" + item.key} activeClassName="active" onClick={()=>this.changeTab(item)}>
                   <div className="tabs-icon"></div>
                   <div className="btn-name">{name}</div>  
               </NavLink>
           </div>
       )
   })
  

  }
  render(){
  return(
  

  
  {this.renderItems()}
  
  
  )
  }
  }
  export default withRouter(connect(
  state =>({
  tabs: state.tabReducer.tabs,
  activeKey: state.tabReducer.activeKey
  })
  )(BottomBar));

这个就是那节课改动的页面的代码

Answer 1

吕小鸣 2018-11-20 21:02:40

各位同学后面遇到这个问题可以安装如下步骤解决：

1. 删除你代码里的node_modules文件夹(整个文件夹都删除)。

2. 替换你代码里的package.json为https://git.imooc.com/coding-272/coding-272/src/master/waimai_webapp/package.json。

3. 在你的项目的根目录，一般是waimai_webapp，然后执行
   

4. npm install

5. 这样执行之后，后续视频里面的安装相关模块的操作学生可以不必执行了，因为在执行3，4步骤之后已经把你依赖的所有文件都已经安装好了，学生只需要知道有这个安装即可。

为什么会这样？

在视频的录制过程中，项目所依赖的react webpack webpack dev server等等都是当时的版本，而学生在学习时可能这些依赖都已经进行了升级，有些升级之后会出现不兼容的情况，(例如这个问题:当学生在跟着视频中执行npn install webpack-dev-server时安装的时最新的版本已经不是视频课程里的那个版本了)所以需要保证学习在学习时的代码的相关依赖模块的版本要和视频里的代码的版本一致才行。

Answer 2

吕小鸣 2018-11-19 20:40:12

你好，检查一下你写的组件是否有没有使用export组件的哈

• 提问者 哟只贤 #1

  应该是每一个都exports了的，终端没有报错，那一节我前后对比视频对比了很多次，然后我还和老师的源码对比了，还是找不到错哪了……

• 提问者 哟只贤 #2

  是export了的

• 吕小鸣 回复 提问者 哟只贤 #3

  把你的代码都贴上来吧，我看看

点开查看后面9条评论