问题及解决方案汇总--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文件 解决方案： https://github.com/facebookincubator/create-react-app/issues/1084

[yezihaohao]

问题描述： 在不执行npm run eject的情况下，使用异步加载组件，进行代码拆分。code-splitting-in-create-react-app 解决方案：https://github.com/facebookincubator/create-react-app/issues/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 && (

) `

你加的这个之后（我并不知道有没有对手机端滚动快慢有影响），但是在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

[yezihaohao]

@jhz-jiayanyan 非路由配置 的组件，通过withRouter传递路由相关的状态和属性

[davychan1985]

@yezihaohao 你好，访问localhost:3006/#/app时跳到了404，但src/Page.js文件里明明定义了如下路由

[richard2018]

登录表单写在js 模块里，需要加载完成js才可以显示登录信息，导致进入登录界面比较慢？有解决办法吗？

[yezihaohao]

@richard2018 优化的方式有很多，可以对代码进行gzip压缩，也可以路由代码拆分，也可以多页面方式将登陆页面单独做成入口文件等其他方式

[yangmingfa]

我用create-react-app新建了一个项目，按照你文档说的配置antd的主题色，怎么没有生效？

[shenhua59]

@yezihaohao 能升级一下项目吗，webpack已经到4了，

[towHandsTyping]

如何配置开发环境，生成环境呢。需要配置node吗

[richard2018]

你好，请问如何集成babel插件: babel-plugin-transform-decorators?

[yezihaohao]

@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

[zhengcanbiao]

问题描述：我发现每次改动屏幕的时候，所有的子组件都会重新渲染，执行componentDidMount。 重现步骤：可以在首页试着拉动屏幕，我们会看到chart的图在每次改变屏幕窗口大小的时候会重新渲染。 疑问：在实际使用场景中，我们可能在componentDidMount里去请求接口，并setState，会导致内容一直刷新，请问这个问题应该怎么优化呢？

[yezihaohao]

@zhengcanbiao 你说的应该是echarts自身适应窗口的重绘行为，你可以在首页的componentDidMount里面console.log('xxx') 试试，看下会窗口变化时会执行多少次

[zhengcanbiao]

@zhengcanbiao 你说的应该是echarts自身适应窗口的重绘行为，你可以在首页的componentDidMount里面console.log('xxx') 试试，看下会窗口变化时会执行多少次

我写了一个组件，在componentDidMount里打印日志，每次窗口变化都会打印日志诶。其实希望窗口变化子组件不要在重新渲染了，有试着在shouldComponentUpdate 去判断也解决不了这个问题

[yezihaohao]

@zhengcanbiao 你的是最新的代码吗？对比一下这两块的代码 https://github.com/yezihaohao/react-admin/blob/master/src/Page.js#L8 https://github.com/yezihaohao/react-admin/blob/master/src/routes/index.js#L34

[pepperbeibei]

你好，本人初学react，我参照你的“React+AntD后台管理系统解决方案--终极版”，配置了简单的菜单，在路由上一直不正常，点击任何菜单，都弹出404的错误页面，估计时component的问题，但是不知道怎么解决，能帮忙看看吗？项目地址是：https://github.com/pepperbeibei/platform。谢谢。另外三个QQ群怎么全是广告群啊？

[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这个怎么搞？好像没有文档啊？