ant-design table组件「自定义筛选菜单功能」使用useState定义columns,columns中的render无法获取其他声明的state值。

r7s23pms  于 4个月前  发布在  其他
关注(0)|答案(9)|浏览(41)

https://stackblitz.com/edit/react-kdtlyz?file=demo.js

Steps to reproduce

打开重现链接后,直接在name表头输入关键词「Jim」,Enter即可

What is expected?

「Jim」关键字高亮

What is actually happening?

「Jim」关键字不高亮
| Environment | Info |
| ------------ | ------------ |
| antd | 5.5.1 |
| React | 18.2.0 |
| System | Mac |
| Browser | Chrome 113.0.5672.126 (正式版本) (arm64) |

发现是「renderName」方法中,未获取到最新的「searchedColumn」值导致的,具体为何「searchedColumn」未获取最新值不清楚

sirbozc5

sirbozc51#

这会不会是 react 的特性? useState 会把对象中的函数属性给 useCallback?

yrwegjxp

yrwegjxp2#

不考虑任何 memo 的情况下, 修改 columns={columnsVar} 既可:

建议多熟悉一下 React 使用文档.

ubof19bj

ubof19bj3#

建议多熟悉一下 React 使用文档.
请问文档哪句话或者哪个例子说过这个问题? 望指出 @Wxh16144

p1iqtdky

p1iqtdky4#

请问文档哪句话或者哪个例子说过这个问题

https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state

ih99xse1

ih99xse15#

请问文档哪句话或者哪个例子说过这个问题

https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state

我跟你的理解不一致, 我认为这句话说的是: 当react 作为调用方时, 什么时候会调用什么时候不会调用, 而明显, columns.render 函数 不是由 react 调用的,而是 antd 调用的,正如你们文档里这句话说的不谋而合


之前以为这句话的意思是, columns 永远无法被 memo, 但是看这个情况, 还是可以memo的

https://ant.design/components/table-cn#%E4%B8%BA%E4%BB%80%E4%B9%88-%E6%9B%B4%E6%96%B0-state-%E4%BC%9A%E5%AF%BC%E8%87%B4%E5%85%A8%E8%A1%A8%E6%B8%B2%E6%9F%93

c7rzv4ha

c7rzv4ha6#

我跟你的理解不一致

我希望讨论的是这个 issue 反馈的内容 🤔

7vhp5slm

7vhp5slm7#

不考虑任何 memo 的情况下, 修改 columns={columnsVar} 既可:

建议多熟悉一下 React 使用文档.

如果直接在table里使用声明的columnsVar变量和组件库本身提供的代码没有什么差异。

我现在就是希望使用useState对columns变量进行包裹,并用在table的columns上。
这么做是因为我需要使用setColumns方法,在某些场景下更新columns的值。

但是这么使用后columns.render的函数无法拿到最新的state的值(searchedColumn),这个是期望探讨的内容

ef1yzkbh

ef1yzkbh8#

把你使用render的地方单独抽出来

frebpwbc

frebpwbc9#

columns 依然使用useState定义

相关问题