react.js - ant design +Table组件 + Switch组件组合使用 没有正确渲染？

Question

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])

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

Answer 1

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

1. Switch 组件的受控属性：确保你正确地将 checked 属性绑定到 Switch 组件，并且当 checked 的值改变时，你有一个处理函数来更新它。
2. 渲染逻辑：render 函数中应该根据 record.checked 的值来返回相应的 JSX。
3. 数据源：确保 data 数组中的每一项都有一个 checked 属性，并且它的值是布尔类型的（true 或 false）。
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 处理函数是否正确更新了数据状态，并触发了组件的重新渲染。此外，也可以尝试简化你的代码，逐步排除其他可能的问题源。

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