Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
yezihaohao opened this issue Aug 28, 2017 · 68 comments
Open

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

yezihaohao opened this issue Aug 28, 2017 · 68 comments
Assignees

Comments

@yezihaohao
Copy link
Owner

yezihaohao commented Aug 28, 2017

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

@yezihaohao
Copy link
Owner Author

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

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

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

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

@yezihaohao
Copy link
Owner Author

问题描述: 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

@yezihaohao yezihaohao self-assigned this Sep 19, 2017
@fangjj
Copy link

fangjj commented Sep 21, 2017

作者,你好;我在本地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
Copy link
Owner Author

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

@fangjj
Copy link

fangjj commented Sep 21, 2017

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

@yezihaohao
Copy link
Owner Author

问题描述: 在使用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
Copy link

Helaiqu commented Nov 29, 2017

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

@yezihaohao
Copy link
Owner Author

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

@yezihaohao
Copy link
Owner Author

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

@yezihaohao
Copy link
Owner Author

yezihaohao commented Nov 30, 2017

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

@davecat
Copy link

davecat commented Dec 14, 2017

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

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

@yezihaohao
Copy link
Owner Author

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

@blackboy1987
Copy link

作者封装的那个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
Copy link
Owner Author

yezihaohao commented Jan 22, 2018

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

@blackboy1987
Copy link

是的有的地方改了的。

  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
Copy link
Owner Author

问题描述: 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
Copy link

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

@yezihaohao
Copy link
Owner Author

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

@abduwaly
Copy link

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

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

@davychan1985
Copy link

谷歌浏览器报错?

@davychan1985
Copy link

谷歌浏览器访问http://localhost:3006/#/app/auth/basic 时,页面报错。
39399238-da4ff88a-4b09-11e8-92c4-c198b3c1d613

@yezihaohao
Copy link
Owner Author

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

@sundjly
Copy link

sundjly commented May 8, 2018

image

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

@davychan1985
Copy link

davychan1985 commented May 8, 2018

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

@JIAYan1214
Copy link

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

@davychan1985
Copy link

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

@davychan1985
Copy link

你好,请问一下群号是多少呢?

@yezihaohao
Copy link
Owner Author

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

@danny00lo
Copy link

为什么请求1次接口,然后在页面有一个login接口的请求??
image
初学react...

@danny00lo
Copy link

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

@Paleless
Copy link

Paleless commented Dec 2, 2018

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

@kong-ve
Copy link

kong-ve commented Dec 4, 2018

有固定宽度的表格吗

@bosscheng
Copy link

bosscheng commented Dec 14, 2018

@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
Copy link

lcgyh commented Jan 9, 2019

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

@yezihaohao yezihaohao pinned this issue Jan 14, 2019
@W-ambition
Copy link

请问有redux-alita的教程吗?

@SiroSong
Copy link

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

@hypo1986
Copy link

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

@chenkangyang
Copy link

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
Copy link

wdlhao commented Jul 7, 2019

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

@yezihaohao
Copy link
Owner Author

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

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

@yezihaohao
Copy link
Owner Author

yezihaohao commented Jul 11, 2019

问题描述: 如何兼容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的地方需要自己做兼容)
M4TDVT3` Q4@ZFF{NG17{4Q
OM2C(BM@W 0 H5THV5DX_L

@johngai19
Copy link

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

@zzlit
Copy link

zzlit commented Nov 18, 2019

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

@SilvesterChiao
Copy link

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

@Mirefire
Copy link

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

@winnie-weinan
Copy link

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

@wxzen
Copy link

wxzen commented Nov 15, 2020

项目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
Copy link

项目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
Copy link

leelance commented Dec 5, 2020

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

@jiaxiantao
Copy link

项目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
Copy link

tzbcf commented Apr 14, 2021

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

@102631479
Copy link

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
Copy link

magicsli commented Oct 8, 2021

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

@TomLYW
Copy link

TomLYW commented Jan 10, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests