拓展实践 - 3

[aspirantzhang]

本节学习手册：https://www.yuque.com/aspirantzhang/antdprov5/db7ban

本节代码
8af45fe?branch=8af45fed0a4a0164544ba27fbeca4e8f2164f9fb&diff=split

请发与本节课有关的讨论。

[lansejiyin]

[lansejiyin]

老师，我在处理首次加载页面是两次重复请求 是，我用了useupdateeffect ，还是会有两次重复请求。

[aspirantzhang]

1. 首先看看init()是不是没有配置手动触发manual: true,
2. 如果不是第一个问题，主要寻找是什么触发了页面重新渲染
   另外你的代码风格看起来有问题，不规范，应该是没有配置自动格式化插件吧。

[lansejiyin]

问题找到了，我在usetrackeffect 执行了init.run()

[lensv]

老师问一个课外的问题，文件下载按钮需要怎么处理呢

[aspirantzhang]

我把这问题想简单了，经过尝试，发现跳转到外部地址有这样几种方法可行：

<Button
  onClick={() => {
    window.location.href = 'https://www.aspirantzhang.com/a.zip';  //方法1：本页跳转
    window.location.replace('https://www.aspirantzhang.com/a.zip');  //方法2：本页跳转
    window.open('https://www.aspirantzhang.com/a.zip', '_blank');  //方法3：新窗口跳转
  }}
>
Download
</Button>

<a href="https://www.aspirantzhang.com/a.zip" target="_blank">  //方法4：新窗口跳转
  <Button>Download</Button>
</a>

而Link组件和history.push测试都失败，它们会自动加当前网址的前缀，无法跳转到外部地址。
如果下载这个场景，我想我会用a标签，它貌似比较灵活。

[lensv]

嗯嗯， 好的 ，感谢老师

[lensv]

老师，我又来了，还是一个课外问题😂

我在做文件上传的时候，报了个错

不知道这个问题怎么解决

我的代码：😢
const props = {
action: 'http://192.168.1.174:9090/deviceManagement/importDevice',
};

<Upload {...props}>
<Button icon={}>文件导入

麻烦老师帮我看看

[aspirantzhang]

这个报错是跨域代理问题，在课程中【第十六课：跨域代理】中有讲到原理。
总体来说，http://192.168.1.174:9090/deviceManagement/importDevice 没有允许你localhost:8000访问它
需要在http://192.168.1.174:9090做允许跨域的设置

[lensv]

好的，谢谢老师

[lensv]

老师，在官方的例子当中，打开F12开发者工具后，拖拽屏幕大小界面有自适应的效果，这个是怎么设置的呢😂

[lensv]

老师我整明白了，bootstrap看了一看，主要还是通过栅格Grid组件中的几个参数进行响应式布局，xs，sm，md，lg，xl