日常项目报错记录
- 一、开源项目问题集合
- 安装依赖和启动问题
- 1. 启动时候报The react-scripts package provided by Create React App requires a dependency: "babel-loader": "8.1.0"问题
- 解决方法1:
- 解决方法2:
- 二、react+Ant Design使用遇到的问题
- 1. 使用table组件时候设置宽度之后不起作用
- 问题描述：
- 解决方法：
- 2. jsx中想使用类似vue中v-if效果,可以按照下边方法
- 3. 突然发现组件componentDidMount的请求被调用2次
一、开源项目问题集合
安装依赖和启动问题
1. 启动时候报The react-scripts package provided by Create React App requires a dependency: “babel-loader”: "8.1.0"问题
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react_antd_admin_template@1.0.0 start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react_antd_admin_template@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
解决方法1:
删除package-lock.json
删除node_modules
删除devDependencies中删除“babel-loader”
之后重新下载node_modules
解决方法2:
方法一我用了没反应，就直接用了方法二
我这里直接用的SKIP_PREFLIGHT_CHECK=true 只是跳过检查
二、react+Ant Design使用遇到的问题
1. 使用table组件时候设置宽度之后不起作用
问题描述：
使用Table组件时候自定义宽度，在columns中设置了width：100；没有起作用，其中有一个做了数据初始化，数据很长把内容撑开很大如下图：
解决方法：
添加css设置就可以了 style={{ wordWrap: ‘break-word’, wordBreak: ‘break-word’ }}
之后自定义设置的宽度就可以生效了
2. jsx中想使用类似vue中v-if效果,可以按照下边方法
/// screening('', 'ts_')是我写的方法输出true或者false 使用变量也是相同方法<Form.Item label="输入值" name="inputValue"><Input /></Form.Item>
{screening('', 'ts_') ? (<Form.Item label="日期格式" name="format"><Select><Select.Option value="demo">Demo</Select.Option></Select></Form.Item>):null
}3. 突然发现组件componentDidMount的请求被调用2次
顺着查找发现不是单个组件被调用2次，是被调用2次
原因是 <React.StrictMode>导致的，这种情况只存在开发环境，不影响上线。
<Provider store={store}><React.StrictMode><BrowserRouter><ConfigProvider locale={zhCN}><App /></ConfigProvider></BrowserRouter></React.StrictMode></Provider>