问题及解决方案汇总--FAQ

[yezihaohao]

项目中遇到的问题和找到的解决方案进行汇总清单~

[yezihaohao]

问题描述： create-react-app 打包项目run build 增加进度条信息。

解决方案： 使用webpack plugin --- ProgressPlugin

操作: 找到scripts目录下的build.js 增加以下代码

  let compiler = webpack(config);
  
 + compiler.apply(new webpack.ProgressPlugin({
 +     profile: true
 +}));

[yezihaohao]

问题描述： 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
      // ...
    }
  }

更多的配置操作请参照：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

[fangjj]

作者，你好；我在本地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.

请你帮忙指点一下，谢谢。

[yezihaohao]

@fangjj
配置了proxy之后，请求就不需要再带域名了。
fetch('/data/cityinfo/101010100.html').then(res => res.json()).then(json => console.log(json)).catch(err => console.log(err));
有其他问题可以加群哈。

[fangjj]

nice，搞好了。thank you! 已经加群了。

[yezihaohao]

问题描述： 在使用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高度
            }
        }
    }
};

[Helaiqu]

作者你好：
目前该项目整体配色为黑色，我希望整体还原为antd的初始蓝色。请问如何解决？

[yezihaohao]

@Helaiqu 去掉webpack里面的自定义主题就可以换回默认蓝色了。这个issue不做过多讨论呢，可以加群或者另开issue

[yezihaohao]

问题描述： create-react-app脚手架增加多入口html文件
解决方案： facebook/create-react-app#1084

[yezihaohao]

问题描述： 在不执行npm run eject的情况下，使用异步加载组件，进行代码拆分。code-splitting-in-create-react-app
解决方案：facebook/create-react-app#2477

[davecat]

router.push()报错 表现在登陆界面跟退出

this.props.router.push() 在V4版本应为 this.props.history.push()

[yezihaohao]

@davecat 是的。漏掉了，已经修复。

[blackboy1987]

作者封装的那个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 |

[yezihaohao]

@blackboy1987 你改过代码？ http[funcName](params).then？ 。如果没改过，看下你有没有写对应的请求接口函数

[blackboy1987]

是的有的地方改了的。

1. 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});
增加了传递参数

[yezihaohao]

问题描述： 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对象便是问号形式的参数

[ariesly15]

请问一下彩色图标如何配置的, 我的项目里都是黑白的...

[yezihaohao]

@iwlog antd 的图标是支持样式属性的，也可以导入其他的彩色图标库

[abduwaly]

App.js
// 手机端对滚动很慢的处理 responsive.data.isMobile && ( <style> #root{ height: auto; } </style> )

你加的这个之后（我并不知道有没有对手机端滚动快慢有影响），但是在content里面内容不多的情况下会比较难看（Footer会跑到屏幕中央等），有没有什么建议做到两全？

[davychan1985]

谷歌浏览器报错？

[davychan1985]

谷歌浏览器访问http://localhost:3006/#/app/auth/basic 时，页面报错。

[yezihaohao]

@davychan1985 你改过代码吗？我测了没报错的呢。你打印下auth，看下是不是这个对象有问题

[sundjly]

history传递参数报错，请问是什么原因

[davychan1985]

src/utils/index.jsx，其中_queryString[_pair[0]].push(decodeURIComponent(_pair[1])); 。有个问题就是_queryString是对象应该不能用push吧，对象没有push方法。

[JIAYan1214]

SiderCustom.jsx,中，在初始生命周期的componentDidMount函数中，我打印了一下props里面有路由的状态，是因为用了状态管理吗？

[davychan1985]

作者你好，关闭浏览器后，用户仍然是已登录状态，应该将src/components/pages/Login.jsx、src/components/HeaderCustom.jsx、src/App.js这些文件里的localStorage改为sessionStorage。

[davychan1985]

你好，请问一下群号是多少呢？

[yezihaohao]

@davychan1985 querystring函数你可以打个断点调试下，用户状态保存只是demo，具体看业务需求，群号是592688854

[danny00lo]

为什么请求1次接口，然后在页面有一个login接口的请求??

初学react...

[danny00lo]

为什么proxy server启动后 我的请求会有post变成get请求

[Paleless]

所有的依赖全部是生产环境依赖,确定不改一下吗

[kong-ve]

有固定宽度的表格吗

[bosscheng]

@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)

[lcgyh]

关于权限的优化，建议权限比如菜单栏优化为当没有权限的时候不显示。而不是跳转404.可以根据返回的permissions和auth在前端判断，得到最新的权限菜单。另外再考虑到页面子元素的的权限，就更好了。

[W-ambition]

请问有redux-alita的教程吗？

[SiroSong]

redux-alita这个怎么搞？好像没有文档啊？

[hypo1986]

在首页 里 加链接 跳转到页面 左侧菜单不自动 更新展开 这怎么处理？

[chenkangyang]

Redux-alita使用说明

看了一下redux-alita的实现, 稍微写一下自己的理解, 有错误请指正! @SiroSong @hypo1986
使用React-Redux针对此项目进行了封装,

提供4个功能:
{AlitaProvider, connectAlita, setAlitaState, setConfig}

AlitaProvider

1. 使用 redux-thunk 作为异步action中间件, 生成唯一的一个容器 store,
2. 提供一个包裹在根组件外面的Provider组件, 使所有的子组件都能拿到 store, 它的原理是React组件的context属性

connectAlita(state)

1. 使用connect方法, 从 "UI组件"(App组件) 生成 "容器组件"
2. 传入参数state, 使用mapStateToProps负责输入逻辑, 即将state映射到 "UI组件"的参数(props), 引起UI组件的更新
3. 使用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)执行接口函数

[wdlhao]

master分支，routes/index.js中，
return r.login
? wrappedComponent
: this.requireLogin(wrappedComponent, r.auth)
这里的r.login没有这个属性，为什么要通过r.login来判断呢？

[yezihaohao]

master分支，routes/index.js中，
return r.login
? wrappedComponent
: this.requireLogin(wrappedComponent, r.auth)
这里的r.login没有这个属性，为什么要通过r.login来判断呢？

某些不需要登录判断的场景需要，该模板后续会加此功能

[yezihaohao]

问题描述： 如何兼容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的地方需要自己做兼容）

[weizy0219]

请问mock的数据格式应该是什么，演示地址和直接安装都连不上mock网站了。能不能自己本地mock一份？

[zzlit]

你好，第一次加载非常慢，好像是因为路由没有进行懒加载？

[SilvesterChiao]

请问：
执行过 npm run eject之后重新npm start报编译错误要怎么处理

[Mirefire]

我的我用create-react-app项目怎么没scripts目录呢

[winnie-weinan]

请问登录后刷新网页又回到登录页。有什么办法可以使得登录后根据token判断刷新后到登录页或只是刷新页面
谢谢👑

[wxzen]

项目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.

`

[TomoGaSukunai]

项目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.

`
我也遇到了
貌似npm i 安装的依赖版本有问题
你看看你的 lock 文件里实际装的 EChart 依赖版本是不是版本和源代码里的 yarn.lock 有出入
我删了 node_modules 重新用 yarn 好了

[leelance]

各位，最新react+ts版本的 图标是怎么处理的
{item.icon && <Icon type={item.icon} />}
antd3.x这样是没有问题的？ 4.x怎么解决的？

[jiaxiantao]

项目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 重新安装依赖，依然会有同样的问题。

[tzbcf]

最新的包clone下来，启动不起来呀，修改了后，启动起来了，控制台正常，但是页面却还是一堆报错。有点心累

[102631479]

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 | />

[magicsli]

预览的基础动画中的这些似乎有蛮严重的闪烁问题, 点击的时候会闪烁 (bounceInDown, bounceInLeft... )

[TomLYW]

楼主 为啥打包之后登录成功后跳转不到首页去了