描述信息
一个支持标签权限设置的列表,使用的是 antd 的 ProTable 、ProColumns 。table 有两个字段使用了 ProColumns 的 render,渲染成一个复选框,表示是否有选中。
下面是两列中的 render 内容。
{
title: formatMessage({id: "authority.role.field.maintenance"}),
width: 100,
dataIndex: 'roleTagAcl',
hideInSearch: true,
render: (value: number, record) => {
const checked = ((record.roleTagAcl & 1) === 1);
console.log("(value & 1) === 1",record.serviceCode,record.roleTagAcl,checked)
return <Checkbox name="binding"
defaultChecked={checked}
onChange={(value) => handleBoxChange(value,record)}></Checkbox> ;
},
},
{
title: formatMessage({id: "authority.role.field.binding"}),
width: 100,
dataIndex: 'roleTagAcl',
hideInSearch: true,
render: (value: number, record) => {
const checked = ((record.roleTagAcl & 2) === 2);
console.log("(value & 2) === 2",record.serviceCode,record.roleTagAcl,checked)
return <Checkbox name="binding"
defaultChecked={checked}
onChange={(value) => handleBoxChange(value,record)}></Checkbox> ;
},
},
问题描述
现在有几个问题
- 第一次进入到列表的时候,我上面的那一行日志会输出多次( 4 次 5 次都有过),注意我输出了 record.serviceCode,根据 console 日志可以看到输出了几次。 第一次进入列表输出的 console 日志:https://pastebin.com/BH5RTnQT
- 进入列表后,输入查询条件( serviceCode ),点击查询。console 输出了所有的记录日志,然后才输出我指定查询条件的日志,且都是多条。 第一次点击查询后的 console 输出日志:https://pastebin.com/igg9VvDk
- 我搜索一个存在的标签( serviceCode )后,render 渲染出来的复选框选中结果始终和无搜索条件时的列表中的第一行记录的渲染结果一致。 就算日志输出的 checked 是 false,如果列表中的第一行是选中的,搜索后渲染出来的就是选中。总结就是列表中第一行的复选框是什么状态,搜索一条指定的记录后渲染出来的就是什么状态,搜索结果中的第一行记录不会根据我 render 里面的代码来渲染结果。
- 第一次点击查询会先输出整个列表的日志,后面多次点击查询后的 console 输出日志就仅仅有指定搜索条件的多次输出日志了,和第二个问题类似,但是少了列表日志的一部分:https://pastebin.com/SufiMGAk
总结
- 我观察到了无论我后端接口那个字段返回是 null 还是 0 还是其他值,复选框的选中状态都不能正确渲染。
- 日志会输出多次,这个我不能理解为什么,不知道为什么要这样渲染,希望大佬能赐教。
- 我看到了 react 文档里面的一个副作用,但是还没能怎么看懂,是不是 render 使用的问题?
- 项目整体用到的是 react+antd,零零散散刚接触这个不到 2 个月,还不是很懂这个,希望有知道问题的大佬能帮忙解惑下。