第十一课：组件优化

[aspirantzhang]

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

本节代码
ff7808a?branch=ff7808a1c950e4d5edc106b3551b9706601d46c6&diff=split

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

[lansejiyin]

老师为什么我批量删除时弹窗里的表格可以正常在显示，单个删除时





表格无法显示，为什么这个tablecolums在单个删除时弹窗里获取不到

[lansejiyin]

老师为什么我批量删除时弹窗里的表格可以正常在显示，单个删除时表格无法显示，为什么这个tablecolums在单个删除时弹窗里获取不到

[aspirantzhang]

tableColumns这个变量在deleteOverView中取不到值的根本原因我现在也不清楚。
但在本节课中，这个问题视频课程里已经特别做了说明，改用了ahooks的useSessionStorageState来存储tableColumn的值，可参考本节的代码。

[zhaochaofight]

老师helper.js 设置字段format日期的方法 参数ts 报错如下
data: BasicListApi.PageData 并非所有代码路径都有返回值
然后我把下载源码 data.d.ts 复制过去，方法也复制过去
useEffect(() => {
if (init.data) {
form.setFieldsValue(setFieldAdaptor(init.data));
}
}, [init.data]);
ts还是报错相同的：参数init.data 是useRequest请求返回值，只是传参了一下
找了很久不知道咋回事了

[aspirantzhang]

并非所有代码路径都有返回值
这个错误，一般是在if或者switch的逻辑判断的位置。和d.ts这样的类型定义文件应该无关。
所以主要找一个if或者switch，是不是有分支忘了写返回。
如果报错在helper.ts中，重点检查

if (data?.layout?.tabs && data.dataSource) {
xxx
}
return {};

[zhaochaofight]

老师我安装npm i ahooks --save 这个依赖 会导致我antd react 这些依赖更改 导致 项目启动不起来 ,我试了好几次都不行，是什么问题a

[aspirantzhang]

启动不起来是什么报错？
删掉node-modules文件夹重新npm install试一下

[4LostGreyWolf]

‍columns 在点击单个删除的时候没有作用是因为生成按钮的虚拟节点的时候还没有生成columns 。把创建虚拟按钮放在index中创建就可以拿到 表头的数据

[aspirantzhang]

非常感谢！我再好好消化一下，这块一直弄不明白。

[4LostGreyWolf]

之前看错了，以为用的 return

[Percy0601]

异常处理的部分，目前跟课程讲得有较大差异，官网也没写整体异常如何处理，能否出一个补充视频或者wiki供大家学习呢

[aspirantzhang]

异常处理我觉得课程中已经讲的比较清晰了。一部分是全局的错误拦截，另一部分是单独组件的错误拦截。
主要在【第九课：弹窗优化】中有介绍。
全局错误处理，对应pro文档 https://pro.ant.design/zh-CN/docs/request#%E7%BB%9F%E4%B8%80%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86
单独组件的错误拦截，实际是useRequest的错误拦截，主要是在useRequest中配置onError参数进行捕捉，也在第9课中有实践，对应ahooks的文档在：https://ahooks.js.org/zh-CN/hooks/use-request/basic#options

[mavenge]

用了ahooks之后，关掉浏览器初次进入页面的时候单个删除还是获取不到表头数据，希望老师能给个完美解决方案。

[aspirantzhang]

这块后续课程中还会有一些处理，但到课程截止时还没有完美的方案。这块希望各位在日后自行摸索一下，我放在前端的时间比较有限。

[wlqsltz]

问题原因：
个人理解觉得是因为actionHander里面点击delete时使用到了tableColumns，而在setTableColumns(ColumnBuilder(init.data?.layout.tableColumn, actionHander))时，actionHander当时拿到的tableColumns还没有被赋值，还是个空数组，所以在点击delete执行actionHander会拿到老的tableColumns。
而底部批量操作那里，每次都会重新执行一边ActionBuilder(init.data?.layout?.batchToolBar, actionHander)，这样这里的actionHandler拿到的就是最新的tableColumns。

我的解决方案：改成useRef，后续取值改成tableColumns.current。
const update = useUpdate(); // ahooks里面强制刷新页面的hook
const tableColumns = useRef<BasicListApi.Field[]>([]);

useEffect(() => {
if (init.data?.layout?.tableColumn) {
tableColumns.current = ColumnBuilder(init.data?.layout.tableColumn, actionHander);
update(); // 因为useRef值改变不会导致页面重新渲染，所以这里强制刷新
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [init.data?.layout?.tableColumn]);

[yangzi0210]

批量删除时弹窗里的表格可以正常在显示，单个删除时表格无法显示问题，我理解应该是 useState 执行时机的问题，因为tableColumns 值是有的，我是用 useRef 来解决的。

index.tsx

const batchTableColumns = useRef<BasicListApi.TableColumn[]>([]);

useEffect(() => {
    if (init?.data?.layout?.tableColumn) {
      const tableColumns = ColumnBuilder(
        init?.data?.layout?.tableColumn,
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        actionHandler,
      );
      batchTableColumns.current = tableColumns;
      setTableColumns(tableColumns);
    }
  }, [init?.data?.layout?.tableColumn]);

  const batchOverview = (dataSource: BasicListApi.TableColumn[]) => {
    return (
      <Table
        size="small"
        rowKey="id"
        columns={[
          batchTableColumns.current[0] || {},
          batchTableColumns.current[1] || {},
        ]}
        dataSource={dataSource}
      />
    );
  };