ant-design
🐛[BUG] ProTable对于select的valueType，点击行取消，再点击编辑，会出现报错
🐛 bug 描述
这里的代码有问题，不应该直接使用row的数据，这样的话会绕过renderText方法 https://github.com/ant-design/pro-components/blob/master/packages/utils/src/useEditableArray/index.tsx#L424
📷 复现步骤
-
先点击edit，什么也不做，展示符合预期
-
然后点击取消还原，符合预期
-
再点击编辑，出错了
🏞 期望结果
第3步应该和第1步展示的效果一致
💻 复现代码
这是我的列配置，使用renderText属性来让select组件得到 string[] 类型的value
{
title: 'Team Admin',
dataIndex: 'admin_identity_list',
fieldProps: {
showSearch: true,
loading: isLoading,
options: data?.map(({ identity_id, username }) => ({
value: identity_id,
label: username,
})),
mode: 'multiple',
placeholder: 'search by team admin',
},
valueType: 'select',
formItemProps: {
rules: [{ required: true, message: 'Please select team admin!' }],
},
renderText: (_, record) => record.admin_identity_list.map((user) => user.id),
render: (_, record) => (
<Space>
{record.admin_identity_list.map((user) => (
<Tag key={user.id}>{user.user.username}</Tag>
))}
</Space>
),
},
© 版本信息
- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
🚑 其他信息
{
title: 'action',
valueType: 'option',
key: 'option',
render: (_text, record, _index, action) => [
<a
key="edit"
// eslint-disable-next-line react/jsx-no-bind
onClick={() => {
// here we hack bug: https://github.com/ant-design/pro-components/issues/6024
form.setFieldValue([record.id, 'admin_identity_list'], record.admin_identity_list.map(user=>user.id))
action?.startEditable?.(record.id)
}}
>
Edit
</a>,
],
},
可以暂时这么绕，但总觉得不太好
TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。
你好，感谢你的反馈。类似这种 bug 通常是逻辑上的问题，需要逐个排查解决，下面过程请参考。
首先，根据描述以及其中提供的代码，可以看出可能是因为 row 的数据与 renderText 方法获取到数据存在出入，导致出现错误。
在 renderText 中，假设对应的字段为 column，在 value type 为 'select' 时，代码就是这样的：
(_, row) => row[column].map((value) => value.id)
然而，在 useEditableArray 的 startEditable 方法中，会再次调用 renderText，而此时传入的 row 数据只包含了被编辑的那行数据，这导致了以下错误：
Uncaught TypeError: undefined is not iterable (cannot read property [Symbol.iterator])
因此我们需要经过以下几个步骤来解决这个错误。
-
调试出问题所在。根据错误信息，我们通常可以断言此问题是因为 row[column] 为空或不存在导致的。因此，在 startEditable 前所在的调用链中添加 console.log，以获取我们传入 startEditable 中的 row 时， row[column] 的值，以此确认结论。
-
确认问题可能出现的范围。在确认问题所在后，需要考虑此问题是否可能出现在其他的地方。在这种情况下， renderText 的逻辑可以将 row[column] 明确转换为 id 数组，而使用相同数据的地方没做这个工作，也许是其他地方的 bug 所导致的。请尝试考虑数据传递的各个点。
-
通过启动可编辑模式之前的逻辑来修正问题。由于此问题与代码的行为缺陷/协同互动有关，如果修正此问题可能导致其他问题的出现。因此，我们应该在调用 startEditable 前的逻辑中进行修正，并尽可能少的修改。请根据第一步中的日志信息，考虑在调用 startEditable 之前针对 row[column] 的问题进行修正。可能会使用数据转换或其他行为。
