ant design +Table组件 + Switch组件组合使用 没有正确渲染?

ant design +Table组件 + Switch组件组合使用

 render: (text: string, record: any) => {
                console.log('record.checked',record.NAME,record.checked,text)

输出的checked都为true了,但是Switch没有选中,

甚至我对table的data数据进行了useMemo了还是不行,

const tableRedner=useMemo(()=>{},[data])

image.png

ant design +Table组件 + Switch正常的渲染

阅读 932
avatarAI BotBETA

Ant Design 的 Table 组件和 Switch 组件结合使用时,如果 Switch 没有正确根据 record.checked 的值进行渲染,可能是因为以下原因:

  1. Switch 组件的受控属性:确保你正确地将 checked 属性绑定到 Switch 组件,并且当 checked 的值改变时,你有一个处理函数来更新它。
  2. 渲染逻辑render 函数中应该根据 record.checked 的值来返回相应的 JSX。
  3. 数据源:确保 data 数组中的每一项都有一个 checked 属性,并且它的值是布尔类型的(truefalse)。
  4. useMemo 的使用useMemo 用于避免不必要的计算,它不会改变渲染逻辑。如果你认为数据已经稳定且不需要重新计算,使用 useMemo 是可以的,但请确保你正确地传递了依赖项数组。
  5. 其他可能的问题:检查是否有其他父组件或全局状态影响到了 Switch 的渲染。

为了解决这个问题,你可以尝试以下步骤:

  • 确保 Switch 组件的 checked 属性正确绑定到 record.checked
  • render 函数中,根据 record.checked 的值返回相应的 JSX,例如:
render: (text, record) => (
  <Switch checked={record.checked} onChange={/* 你的处理函数 */} />
)
  • 确保 data 数组中的每个对象都有一个 checked 属性,并且它的值是布尔类型。
  • 如果你使用了 useMemo,确保它正确地包裹了你的渲染逻辑,并且依赖项数组包含了所有可能影响渲染的变量。

如果上述步骤都正确无误,但问题依旧存在,请检查你的 onChange 处理函数是否正确更新了数据状态,并触发了组件的重新渲染。此外,也可以尝试简化你的代码,逐步排除其他可能的问题源。

请注意,由于你提供的信息有限,无法给出更具体的代码示例或解决方案。如果你能提供更多的代码上下文或错误信息,我可能能够给出更准确的帮助。

1 个回答

把render里的代码都贴出来啊

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题