React开发散记2

React开发散记2

web的开发过程中总是会遇到各种各样的问题，在这里统一的记录一下遇到的问题，以及解决的办法。

Redux中Reducer返回报错

// reducer.js如下所示：
import { combineReducers } from 'redux'
export default combineReducers({})

//  在这里由于reducer还没有具体的操作，所以返回的函数为空

// index.js如下所示：
import React from 'react'
import ReactDom from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import { BrowserRouter, Route, Redirect, Switch} from 'react-router-dom'
import reducers from './reducer'
import './config'

const store = createStore(reducers, compose(
	applyMiddleware(thunk),
	window.devToolsExtension?window.devToolsExtension():f=>f
))

ReactDom.render(
    (<Provider store={store}>
        <BrowserRouter>
        </BrowserRouter>
    </Provider>),
        document.getElementById('root')
)

在createStore中浏览器的console报错如下所示：

Store does not have a valid reducer . Make sure the argument passed to combineReducers is an object whose values are reducers.

解决办法：
参考Stack Overflow中别人的解决办法，更改reducer内容为如下所示：

import { combineReducers } from 'redux'
export default () => {}

原因解释： 使用() => {}作为export的结果，是一个对象

路由出错

ReactDom.render(
	(<Provider store={store}>
		<BrowserRouter>
			<Route path='/login' component={Login} > </Route>
			<Route path='/register' component={Register} > </Route>
		</BrowserRouter>
	</Provider>),
		document.getElementById('root')
)

以上程序的渲染结果无法完成页面的渲染，需要使用一下的表达方式：

ReactDom.render(
	(<Provider store={store}>
		<BrowserRouter>
			<Route path='/login' component={Login} />
			<Route path='/register' component={Register} />
		</BrowserRouter>
	</Provider>),
		document.getElementById('root')
)

只是在路由Route出做出了细微的改变

react按需加载无法使用 && withRouter报错无法按需加载

package.json关于按需加载部分的配置如下所示：

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "imports",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ],
      "transform-decorators-legacy"
    ]
  },

以上的配置在antd-mobile的使用时无法按需加载，在使用react-router里的withRouter时会报出以下的错误：
使用react-router里的withRouter时报错：
Syntax error - Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled;

SyntaxError: D:\Redux_React\csquery\src\component\authroute\authroute.js: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled

解决办法：

1. 首先配置的plugins里的imports应该是import；

   在使用antd-mobile的时候，这里imports应该是import才能正确的按需加载，多加了s在使用的时候无法正确的进行按需加载。

2. 查看Stack Overflow，参考解决办法如下所示：

   （1）安装需要的组件

   npm install @babel/plugin-proposal-decorators --save-dev
   

   （2）更改package.json的babel配置：

   "babel": {
       "presets": [
           "react-app"
       ],
       "plugins": [
           [
           "import",
           {
               "libraryName": "antd-mobile",
               "style": "css"
           }
           ],
           [
           "@babel/plugin-proposal-decorators",
           {
               "legacy": true
           }
           ]
       ]
   },
   

   （3）查看devDependencies的配置是否如下：

   "devDependencies": {
       "@babel/plugin-proposal-decorators": "^7.3.0"
   }