react相关报错--持续更新中

日常项目报错记录

  • 一、开源项目问题集合
    • 安装依赖和启动问题
      • [1. 启动时候报The react-scripts package provided by Create React App requires a dependency: "babel-loader": "8.1.0"问题](#1. 启动时候报The react-scripts package provided by Create React App requires a dependency: "babel-loader": "8.1.0"问题)
  • [二、react+Ant Design使用遇到的问题](#二、react+Ant Design使用遇到的问题)
    • [1. 使用table组件时候设置宽度之后不起作用](#1. 使用table组件时候设置宽度之后不起作用)
    • [2. jsx中想使用类似vue中v-if效果,可以按照下边方法](#2. jsx中想使用类似vue中v-if效果,可以按照下边方法)
    • [3. 突然发现组件componentDidMount的请求被调用2次](#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效果,可以按照下边方法

javascript 复制代码
/// 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>导致的,这种情况只存在开发环境,不影响上线。

javascript 复制代码
 <Provider store={store}>
    <React.StrictMode>
      <BrowserRouter>
        <ConfigProvider locale={zhCN}>
          <App />
        </ConfigProvider>
      </BrowserRouter>
    </React.StrictMode>
  </Provider>
相关推荐
猫头虎-前端技术22 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫22 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓22 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java22 分钟前
CSS的文本样式
前端·css
前端小趴菜0523 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术23 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技25 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作27 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG91329 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~35 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架