antd pro v4 记录

1.react出现Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions an...

解决方案:

第一步:首先看下页面是否有settimeout、setinterval、addeventlisterner而未在componentWillUnMount里面清除,如果是则清除一下;

第二步:如果排除第一步,可以根据错误定位是哪个组件导致的,例如Tree组件报这个错了,在页面render里面可以这样加载Tree组件:

{treeData&&treeData.length>0?<Tree treeData={treeData} />:null}

即:有数据的时候再渲染,不要直接渲染。

2.ant design pro v4设置侧边栏宽度,设置Prolayout的siderWidth="160",结果侧边栏可以折叠,但是展开时右侧内容部分被覆盖到底下(即右侧部分宽度仍是收缩状态大小)

解决方案:这样写siderWidth={160}

 

Ant Design Pro v4 是一个基于 Ant Design 设计语言的企业级中后台前端/设计解决方案,其中包含了一些用于数据模拟的 mock 功能。在 Pro v4 中,mock 数据是通过 umi-request 库来实现的。 要在 Ant Design Pro v4 中使用 mock 功能,你可以按照以下步骤进行操作: 1. 在 `src` 目录下创建一个名为 `mock` 的文件夹。 2. 在 `mock` 文件夹中创建一个名为 `api.ts` 的文件,用于编写接口的 mock 数据。 3. 在 `api.ts` 文件中,你可以使用 umi-request 提供的 `extend` 方法来创建一个请求实例,并通过 `mock` 方法来定义接口的 mock 数据。例如: ```typescript import { extend } from 'umi-request'; const request = extend({ prefix: '/api', timeout: 1000, }); export default { 'GET /api/user': { id: 1, name: 'John Doe', }, 'POST /api/login': (req, res) => { const { username, password } = req.body; if (username === 'admin' && password === '123456') { res.send({ status: 'ok', message: 'Login successful!', }); } else { res.send({ status: 'error', message: 'Invalid username or password!', }); } }, 'PUT /api/user/:id': (req, res) => { const { id } = req.params; const { name } = req.body; res.send({ id, name, }); }, }; ``` 在上面的例子中,我们定义了三个接口的 mock 数据:`GET /api/user`、`POST /api/login` 和 `PUT /api/user/:id`。 4. 在 `src` 目录下的 `models` 文件夹中创建一个名为 `mock.ts` 的文件,并在该文件中导入 `api.ts` 中定义的 mock 数据。例如: ```typescript import api from '@/mock/api'; const enableMock = true; // 是否开启 mock 功能 if (enableMock) { Object.keys(api).forEach((key) => { const [method, path] = key.split(' '); const [mockMethod, mockPath] = method.split('_'); if (mockMethod && mockPath) { umiMocker(mockMethod.toUpperCase(), mockPath, api[key]); } }); } ``` 在上面的例子中,我们通过遍历 `api.ts` 中定义的 mock 数据,并使用 `umiMocker` 方法来注册 mock 接口。 5. 在 `src/app.tsx` 文件中,将 `import './mock';` 添加到文件开头,以确保 mock 数据在应用启动时被加载。例如: ```typescript import './mock'; ``` 完成以上步骤后,当你在开发环境下运行 Ant Design Pro v4 时,接口请求将会被拦截并返回 mock 数据。 请注意,以上只是一个简单的示例,你可以根据自己的需求来编写更复杂的 mock 数据。另外,需要注意的是,在生产环境下是不会启用 mock 功能的,mock 数据只会在开发环境中生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KV_T

您的鼓励会激发我的创作热情笑脸

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值