问题及解决方案汇总--FAQ
yezihaohao opened this issue · comments
项目中遇到的问题和找到的解决方案进行汇总清单~
问题描述： create-react-app 打包项目run build 增加进度条信息。
解决方案： 使用webpack plugin --- ProgressPlugin
操作: 找到scripts目录下的build.js 增加以下代码
let compiler = webpack(config);
+ compiler.apply(new webpack.ProgressPlugin({
+ profile: true
+}));
问题描述： create-react-app脚手架项目怎么添加proxy代理请求。
解决方案： package.json增加代理请求配置。
操作： 找到项目根目录下的package.json，增加以下代码
// 简单单个操作，请求fetch('/api/todos')，将匹配fetch('http://localhost:4000/api/todos')
"proxy": "http://localhost:4000",
// 更多的配置
"proxy": {
"/api": {
"target": "<url>",
"ws": true
// ...
}
}
作者，你好；我在本地package.json配置，"proxy": "http://www.weather.com.cn"，然后在页面上进行请求数据，
import 'whatwg-fetch';
fetch('http://www.weather.com.cn/data/cityinfo/101010100.html').then( res => {console.log(res);return res.json();}).then(json => json).catch( err => {
console.log('err', err);
});结果报错：Fetch API cannot load http://www.weather.com.cn/data/cityinfo/101010100.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3006' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
请你帮忙指点一下，谢谢。
@fangjj
配置了proxy之后，请求就不需要再带域名了。
fetch('/data/cityinfo/101010100.html').then(res => res.json()).then(json => console.log(json)).catch(err => console.log(err));
有其他问题可以加群哈。
nice，搞好了。thank you! 已经加群了。
问题描述： 在使用hashRouter的情况下怎么实现类似锚点跳转
解决方案： 使用Element.scrollIntoView()
操作： 代码示例
const scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
if(anchorElement) {
anchorElement.scrollIntoView();
// 如果页面有固定header，处理顶部header遮挡title的问题
const scrolledY = window.scrollY;
if(scrolledY){
window.scroll(0, scrolledY - 100); // 100为header高度
}
}
}
};
作者你好：
目前该项目整体配色为黑色，我希望整体还原为antd的初始蓝色。请问如何解决？
问题描述： create-react-app脚手架增加多入口html文件
解决方案： facebook/create-react-app#1084
问题描述： 在不执行npm run eject的情况下，使用异步加载组件，进行代码拆分。code-splitting-in-create-react-app
解决方案：facebook/create-react-app#2477
router.push()报错 表现在登陆界面跟退出
this.props.router.push() 在V4版本应为 this.props.history.push()
作者封装的那个post请求 我这边
export const fetchData = ({funcName, params, stateName}) => dispatch => {
!stateName && (stateName = funcName);
dispatch(requestData(stateName));
return httpfuncName.then(res => dispatch(receiveData(res, stateName)));
};
如果这个方法是post请求 浏览器回报错误
TypeError: Cannot read property 'then' of undefined
(anonymous function)
src/action/index.js:21
18 | export const fetchData = ({funcName, params, stateName}) => dispatch => {
19 | !stateName && (stateName = funcName);
20 | dispatch(requestData(stateName));
21 | return httpfuncName.then(res => dispatch(receiveData(res, stateName)));
22 | };
23 |
24 |
@blackboy1987 你改过代码？ http[funcName](params).then？ 。如果没改过，看下你有没有写对应的请求接口函数
是的有的地方改了的。
-
Login.jsx的33行改成：
fetchData({funcName: 'admin',params:values, stateName: 'auth'});//if (values.userName === 'admin' && values.password === 'admin') fetchData({funcName: 'admin', stateName: 'auth'}); // if (values.userName === 'guest' && values.password === 'guest') fetchData({funcName: 'guest', stateName: 'auth'});
因为我要post表单提交所以传递了参数.
2.axios/index.js的第5行改成了：
import { get,post } from './tools';
因为admin方法执行post请求，导入了post方法
3.axios/index.js的第36行改成了：
export const admin = (params) => post({url: config.MOCK_AUTH_ADMIN,data:params});
增加了传递参数
问题描述： react-router 4.x的版本路由怎么以问号的形式传参数并且以key: value对象的形式传递给组件props？
解决方案： 安装query-string插件库，解析location.search的字符串，然后合并到props上，传递给组件。
栗子：
import queryString from 'query-string';
<Route
exact
path="/xxx/xxx"
render={props => {
Object.assign(props, {query: queryString.parse(props.location.search)});
return <Component {...props} />
}
}
/>
在对应的路由组件中，this.props.query对象便是问号形式的参数
请问一下彩色图标如何配置的, 我的项目里都是黑白的...
@iwlog antd 的图标是支持样式属性的，也可以导入其他的彩色图标库
App.js
// 手机端对滚动很慢的处理 responsive.data.isMobile && ( <style> #root{ height: auto; } </style> )
你加的这个之后（我并不知道有没有对手机端滚动快慢有影响），但是在content里面内容不多的情况下会比较难看（Footer会跑到屏幕**等），有没有什么建议做到两全？
谷歌浏览器报错？
谷歌浏览器访问http://localhost:3006/#/app/auth/basic 时，页面报错。
@davychan1985 你改过代码吗？我测了没报错的呢。你打印下auth，看下是不是这个对象有问题
history传递参数报错，请问是什么原因
src/utils/index.jsx，其中_queryString[_pair[0]].push(decodeURIComponent(_pair[1])); 。有个问题就是_queryString是对象应该不能用push吧，对象没有push方法。
SiderCustom.jsx,中，在初始生命周期的componentDidMount函数中，我打印了一下props里面有路由的状态，是因为用了状态管理吗？
作者你好，关闭浏览器后，用户仍然是已登录状态，应该将src/components/pages/Login.jsx、src/components/HeaderCustom.jsx、src/App.js这些文件里的localStorage改为sessionStorage。
你好，请问一下群号是多少呢？
@davychan1985 querystring函数你可以打个断点调试下，用户状态保存只是demo，具体看业务需求，群号是592688854
@jhz-jiayanyan 非路由配置 的组件，通过withRouter传递路由相关的状态和属性
@yezihaohao 你好，访问localhost:3006/#/app时跳到了404，但src/Page.js文件里明明定义了如下路由
登录表单写在js 模块里，需要加载完成js才可以显示登录信息，导致进入登录界面比较慢？有解决办法吗？
@richard2018 优化的方式有很多，可以对代码进行gzip压缩，也可以路由代码拆分，也可以多页面方式将登陆页面单独做成入口文件等其他方式
我用create-react-app新建了一个项目，按照你文档说的配置antd的主题色，怎么没有生效？
@yezihaohao 能升级一下项目吗，webpack已经到4了，
如何配置开发环境，生成环境呢。需要配置node吗
你好，请问如何集成babel插件: babel-plugin-transform-decorators?
@richard2018
6.X 使用babel-plugin-transform-decorators
7.X 使用babel-plugin-transform-decorators-legacy
// 使用7.x
1. yarn add babel-plugin-transform-decorators-legacy
2. package.json 中babel部分增加：
"plugins": [
"transform-decorators-legacy"
]
eg:
"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-decorators-legacy"
]
}
3.yarn start ---- happy coding
针对create-react-app 项目并且 执行 eject
babel 6.x的用法和上面一致，文档链接：http://babeljs.io/docs/en/babel-plugin-transform-decorators
问题描述：我发现每次改动屏幕的时候，所有的子组件都会重新渲染，执行componentDidMount。
重现步骤：可以在首页试着拉动屏幕，我们会看到chart的图在每次改变屏幕窗口大小的时候会重新渲染。
疑问：在实际使用场景中，我们可能在componentDidMount里去请求接口，并setState，会导致内容一直刷新，请问这个问题应该怎么优化呢？
@zhengcanbiao 你说的应该是echarts自身适应窗口的重绘行为，你可以在首页的componentDidMount里面console.log('xxx') 试试，看下会窗口变化时会执行多少次
@zhengcanbiao 你说的应该是echarts自身适应窗口的重绘行为，你可以在首页的componentDidMount里面console.log('xxx') 试试，看下会窗口变化时会执行多少次
我写了一个组件，在componentDidMount里打印日志，每次窗口变化都会打印日志诶。其实希望窗口变化子组件不要在重新渲染了，有试着在shouldComponentUpdate 去判断也解决不了这个问题
你好，本人初学react，我参照你的“React+AntD后台管理系统解决方案--终极版”，配置了简单的菜单，在路由上一直不正常，点击任何菜单，都弹出404的错误页面，估计时component的问题，但是不知道怎么解决，能帮忙看看吗？项目地址是：https://github.com/pepperbeibei/platform。谢谢。另外三个QQ群怎么全是广告群啊？
为什么请求1次接口，然后在页面有一个login接口的请求??
初学react...
为什么proxy server启动后 我的请求会有post变成get请求
所有的依赖全部是生产环境依赖,确定不改一下吗
有固定宽度的表格吗
@yezihaohao 你好:https://cheng_haohao.oschina.io/reactadmin/ 点击全屏的时候有报错。
screenfull.js:98 Uncaught (in promise) TypeError: Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object.
at Object.request (screenfull.js:98)
at o.screenFull (HeaderCustom.jsx:58)
at Object.r (ReactErrorUtils.js:26)
at a (EventPluginUtils.js:85)
at Object.s [as executeDispatchesInOrder] (EventPluginUtils.js:105)
at d (EventPluginHub.js:43)
at v (EventPluginHub.js:54)
at Array.forEach ()
at r (forEachAccumulated.js:24)
at Object.processEventQueue (EventPluginHub.js:254)
关于权限的优化，建议权限比如菜单栏优化为当没有权限的时候不显示。而不是跳转404.可以根据返回的permissions和auth在前端判断，得到最新的权限菜单。另外再考虑到页面子元素的的权限，就更好了。
请问有redux-alita的教程吗？
redux-alita这个怎么搞？好像没有文档啊？
在首页 里 加链接 跳转到页面 左侧菜单不自动 更新展开 这怎么处理？
Redux-alita使用说明
看了一下redux-alita的实现, 稍微写一下自己的理解, 有错误请指正! @SiroSong @hypo1986
使用React-Redux针对此项目进行了封装,
提供4个功能:
{AlitaProvider, connectAlita, setAlitaState, setConfig}
AlitaProvider
- 使用 redux-thunk 作为异步action中间件, 生成唯一的一个容器 store,
- 提供一个包裹在根组件外面的Provider组件, 使所有的子组件都能拿到 store, 它的原理是React组件的context属性
connectAlita(state)
- 使用connect方法, 从 "UI组件"(App组件) 生成 "容器组件"
- 传入参数state, 使用mapStateToProps负责输入逻辑, 即将state映射到 "UI组件"的参数(props), 引起UI组件的更新
- 使用mapDispatchToProps负责输出逻辑, 即将用户对 "UI组件"的操作映射成 Action, 传给Store存储, 引起state的更新
setAlitaState(Object)
Object.funcName: 请求接口函数名称
Object.stateName: category
Object.data: data
Object.params: 请求接口的参数
之后 dispatch 执行一个 Action, 表示 state 要发生变化
setConfig (apis)
传入所有的接口, 存入funcs, 以便使用funcs[funcName](params)执行接口函数
master分支，routes/index.js中，
return r.login
? wrappedComponent
: this.requireLogin(wrappedComponent, r.auth)
这里的r.login没有这个属性，为什么要通过r.login来判断呢？
master分支，routes/index.js中，
return r.login
? wrappedComponent
: this.requireLogin(wrappedComponent, r.auth)
这里的r.login没有这个属性，为什么要通过r.login来判断呢？
某些不需要登录判断的场景需要，该模板后续会加此功能
问题描述： 如何兼容IE浏览器？
解决方案： JavaScript Environment Requirements
参考：#56 facebook/react#11429 https://facebook.github.io/create-react-app/docs/supported-browsers-features
create-react-app开发环境下参考： facebook/create-react-app#5336 (comment)
其他：动动小手指Google
（ps：react-admin测试IE11，IE10，IE9下都可正常运行）
2019-09-10增加：
最简单的兼容方法（在上面的方案中）：
安装react-app-polyfill（yarn add react-app-polyfill），在src/index.js最顶端引用import 'react-app-polyfill/ie9';
注意：打包之后没问题，本地开发环境的话需要修改下config/webpack.config.dev.js，注释掉require.resolve('react-dev-utils/webpackHotDevClient')
在IE文档仿真模式下的效果截图（IE9不支持flex样式，所以用到flex的地方需要自己做兼容）
请问mock的数据格式应该是什么，演示地址和直接安装都连不上mock网站了。能不能自己本地mock一份？
你好，第一次加载非常慢，好像是因为路由没有进行懒加载？
请问：
执行过 npm run eject之后重新npm start报编译错误要怎么处理
我的我用create-react-app项目怎么没scripts目录呢
请问登录后刷新网页又回到登录页。有什么办法可以使得登录后根据token判断刷新后到登录页或只是刷新页面
谢谢👑
项目start/build失败，recharts报错：
`
TypeScript error in D:/Develop/jsspace/study/react-admin/src/components/charts/EchartsEffectScatter.tsx(514,17):
No overload matches this call.
Overload 1 of 2, '(props: ReactEchartsPropsTypes | Readonly): ReactEcharts', gave the following error.
Type '{ backgroundColor: string; title: { text: string; subtext: string; sublink: string; left: string; textStyle: { color: string; }; }; tooltip: { trigger: string; }; legend: { orient: string; y: string; x: string; data: string[]; textStyle: { ...; }; }; geo: { ...; }; series: ({ ...; } | { ...; })[]; }' is not assignable to type 'EChartOption'.
The types of 'legend.orient' are incompatible between these types.
Type 'string' is not assignable to type '"horizontal" | "vertical" | undefined'.
Overload 2 of 2, '(props: ReactEchartsPropsTypes, context: any): ReactEcharts', gave the following error.
Type '{ backgroundColor: string; title: { text: string; subtext: string; sublink: string; left: string; textStyle: { color: string; }; }; tooltip: { trigger: string; }; legend: { orient: string; y: string; x: string; data: string[]; textStyle: { ...; }; }; geo: { ...; }; series: ({ ...; } | { ...; })[]; }' is not assignable to type 'EChartOption'. TS2769
512 | return (
513 | <ReactEcharts
514 | option={option}
| ^
Failed to compile.
`
项目start/build失败，recharts报错：
`
TypeScript error in D:/Develop/jsspace/study/react-admin/src/components/charts/EchartsEffectScatter.tsx(514,17):
No overload matches this call.
Overload 1 of 2, '(props: ReactEchartsPropsTypes | Readonly): ReactEcharts', gave the following error.
Type '{ backgroundColor: string; title: { text: string; subtext: string; sublink: string; left: string; textStyle: { color: string; }; }; tooltip: { trigger: string; }; legend: { orient: string; y: string; x: string; data: string[]; textStyle: { ...; }; }; geo: { ...; }; series: ({ ...; } | { ...; })[]; }' is not assignable to type 'EChartOption'.
The types of 'legend.orient' are incompatible between these types.
Type 'string' is not assignable to type '"horizontal" | "vertical" | undefined'.
Overload 2 of 2, '(props: ReactEchartsPropsTypes, context: any): ReactEcharts', gave the following error.
Type '{ backgroundColor: string; title: { text: string; subtext: string; sublink: string; left: string; textStyle: { color: string; }; }; tooltip: { trigger: string; }; legend: { orient: string; y: string; x: string; data: string[]; textStyle: { ...; }; }; geo: { ...; }; series: ({ ...; } | { ...; })[]; }' is not assignable to type 'EChartOption'. TS2769512 | return ( 513 | <ReactEcharts514 | option={option}
| ^
Failed to compile.`
我也遇到了
貌似npm i 安装的依赖版本有问题
你看看你的 lock 文件里实际装的 EChart 依赖版本是不是版本和源代码里的 yarn.lock 有出入
我删了 node_modules 重新用 yarn 好了
各位，最新react+ts版本的 图标是怎么处理的
{item.icon && <Icon type={item.icon} />}
antd3.x这样是没有问题的？ 4.x怎么解决的？
项目start/build失败，recharts报错：
No overload matches this call.
Overload 1 of 2, '(props: ReactEchartsPropsTypes | Readonly): ReactEcharts', gave the following error.
Type '{ tooltip: { trigger: string; position: (pt: any) => any[]; }; title: { left: string; text: string; }; toolbox: { feature: { dataZoom: { yAxisIndex: string; }; restore: {}; saveAsImage: {}; }; }; xAxis: { type: string; boundaryGap: boolean; data: string[]; }; yAxis: { ...; }; dataZoom: ({ ...; } | { ...; })[]; serie...' is not assignable to type 'EChartOption'.
Types of property 'xAxis' are incompatible.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'XAxis | XAxis[] | undefined'.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'XAxis'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"time" | "value" | "category" | "log" | undefined'.
Overload 2 of 2, '(props: ReactEchartsPropsTypes, context: any): ReactEcharts', gave the following error.
Type '{ tooltip: { trigger: string; position: (pt: any) => any[]; }; title: { left: string; text: string; }; toolbox: { feature: { dataZoom: { yAxisIndex: string; }; restore: {}; saveAsImage: {}; }; }; xAxis: { type: string; boundaryGap: boolean; data: string[]; }; yAxis: { ...; }; dataZoom: ({ ...; } | { ...; })[]; serie...' is not assignable to type 'EChartOption'. TS2769
103 | return (
104 | <ReactEcharts
105 | option={option}
| ^
106 | style={{ height: '300px', width: '100%' }}
107 | className={'react_for_echarts'}
108 | />
我也遇到了这个问题，我试图删掉node_modules 依赖包，使用yarn 重新安装依赖，依然会有同样的问题。
最新的包clone下来，启动不起来呀，修改了后，启动起来了，控制台正常，但是页面却还是一堆报错。有点心累
TypeScript error in C:/Users/Administrator/Desktop/react-admin-master/src/components/charts/EchartsArea.tsx(105,17):
No overload matches this call.
Overload 1 of 2, '(props: ReactEchartsPropsTypes | Readonly): ReactEcharts', gave the following error.
Type '{ tooltip: { trigger: string; position: (pt: any) => any[]; }; title: { left: string; text: string; }; toolbox: { feature: { dataZoom: { yAxisIndex: string; }; restore: {}; saveAsImage: {}; }; }; xAxis: { type: string; boundaryGap: boolean; data: string[]; }; yAxis: { ...; }; dataZoom: ({ ...; } | { ...; })[]; serie...' is not assignable to type 'EChartOption'.
Types of property 'xAxis' are incompatible.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'XAxis | XAxis[] | undefined'.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'XAxis'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"category" | "value" | "time" | "log" | undefined'.
Overload 2 of 2, '(props: ReactEchartsPropsTypes, context: any): ReactEcharts', gave the following error.
Type '{ tooltip: { trigger: string; position: (pt: any) => any[]; }; title: { left: string; text: string; }; toolbox: { feature: { dataZoom: { yAxisIndex: string; }; restore: {}; saveAsImage: {}; }; }; xAxis: { type: string; boundaryGap: boolean; data: string[]; }; yAxis: { ...; }; dataZoom: ({ ...; } | { ...; })[]; serie...' is not assignable to type 'EChartOption'. TS2769
103 | return (
104 | <ReactEcharts
105 | option={option}
| ^
106 | style={{ height: '300px', width: '100%' }}
107 | className={'react_for_echarts'}
108 | />
预览的基础动画中的这些似乎有蛮严重的闪烁问题, 点击的时候会闪烁 (bounceInDown, bounceInLeft... )
楼主 为啥打包之后登录成功后跳转不到首页去了