问题及解决方案汇总--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文件
解决方案： react/create-react-app#1084

[yezihaohao]

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