11.21工作中遇到的问题
预期：当每行获取红包金额的时候若出现错误，右侧当行会出现提示
结果：获取红包金额出现错误，右侧对应行并没有出现错误提示
我发现，当我们设置readonly的时候，其实render函数依旧是触发了的，右侧图片中的log被成功打印出来了，可以验证，所以可以粗略说明，records被更改，触发了table，以及当前行的渲染，可为什么提示的数据依旧不变
接下来，我用一个简单的demo也复现了这个问题
将readonly: true替换成editable: false，居然就成功了，这与我之前对于readonly和editable的认知有了太大的差距
扩展：readonly和editable的区别
查找dom元素，发现当我设置editable：false的时候，包裹tips的dom标签是ant-table-cel，一个表格元素，但是当设置readonly： true的时候，包裹tips的dom标签是一个表单元素，通过样式class：ant-form-item-control-input-content，可以猜测目前的包裹tips的dom多半是一个受控的input表单
继而，通过阅读pro component中editabe的源码，找到了关键点，对于受控模式下的组件，需要触发onchange，而在代码中触发表单的onchange的条件，由props.controlled控制，这也是为啥我设置readonly：true的时候，没有看见tips更新，即使表格的datasource更新了
所以得到另一种解决方法，
总结
readonly设置为true，编辑表格的form会收集这个字段的值；但是会变成一个受控的不可编辑的input表单项，若去要更新表单，需要controlled设置为true，这样每次value更新的时候都会重置表单了
若设置 editable: false, form不会收集这个字段值，但是依旧是个table-cell
问题Code如下
import { EditableProTable } from "@ant-design/pro-components";
import { useState } from "react";
import { Columns } from "./columns";const rowKey = 'productId';
const EditTable = ()=>{const [data, setData] = useState([{productId: '1',},{productId: '2',},]);const [editableKeys, setEditableRowKeys] = useState(() => []);const [failTips, setFailTips] = useState<any>([]);const changeFailInfo = (curFailTips: any) =>{const uniqueFailTips = [...new Set([...failTips, ...curFailTips].map(item => JSON.stringify(item)))].map(item => JSON.parse(item));setFailTips(uniqueFailTips)const failList = uniqueFailTips.map((item) => item.productId)// 将有错误提示的当前行的failTips字段赋值const temp = JSON.parse(JSON.stringify(data));failList.forEach((item)=>{if(data.find((item2:any)=>item2.productId === item)){temp.find((item2:any)=>item2.productId === item).failTips = uniqueFailTips.find(item2=>item2.productId === item).failDesc}})setData(temp);}return (<><EditableProTablerowKey={rowKey}columns={Columns(changeFailInfo,failTips)}scroll={{ x: 1000 }}borderedvalue={data}recordCreatorProps={false}editable={{type: 'multiple',editableKeys: data.map((item) => item[rowKey]),onChange: setEditableRowKeys,}}tableAlertRender={false}/></>);
}export default EditTableexport const Columns = (changeFailInfo: any, failTips: any) => [{title: 'productId',key: 'productId',dataIndex: 'productId',field: 'productId',headerStyle: { fontSize: 14 },colSize: 0,width: 100,readonly: true, },{title: '期望',key: 'Money',dataIndex: 'Money',editor: 'input-editor',width: 100,editable: true,colSize: 1.5,headerStyle: { fontSize: 14, autoWrapText: true },fieldProps: (form, { entity, rowKey }) => {return {onBlur: async (e) => {const { productId } = entity;const value = e.target.value || 0;if (value == 0) return;changeFailInfo([{ productId, failDesc: 'tips' }]);},};},},{title: '提示',key: 'failTips',dataIndex: 'failTips',editable: false,//readonly: true,align: 'center',fixed: 'right',width: 200,hideInTable: !failTips.length,renderText: (_: any, record: any) => {console.log(record, 'yts_change');return <span style={{ color: 'red' }}>{record.failTips}</span>;},},
];
