如何强制React函数组件重渲染？点击表格行时触发UpdateModal重渲染并传行数据

以下是针对你的需求的修改方案，核心是通过控制组件卸载+挂载的逻辑实现强制重渲染，同时修复原有代码的语法问题：

需修改的核心点 #

• 调整hooks位置：React的useState必须放在函数组件内部顶层调用，原有代码把状态定义写在Table组件外是不符合规则的
• 修正条件渲染逻辑：初始状态改为null，保证第一次选中行之前UpdateModal不会渲染，切换行时先把状态设为null触发组件卸载，再赋值新行数据触发重新挂载，天然实现强制重渲染
• 增加key属性（可选兜底方案）：如果需要保留模态框不关闭的情况下切换行数据刷新，给UpdateModal加唯一key属性即可强制重渲染，不需要卸载再挂载
• 建议移除Bootstrap的data属性控制逻辑，改用React状态统一控制模态框的显隐，避免状态不同步

完整修改后代码 #

import React, { useState } from 'react'
// 引入你的UpdateModal组件
import UpdateModal from './UpdateModal'

const Table = () => {
  // 状态移到组件内部，初始值设为null
  const [selectedRow, setSelectedRow] = useState(null);

  const selectRow = (row) => {
    // 先设为null触发组件卸载，再更新为新行，两次状态更新会合并触发一次重渲染
    setSelectedRow(null);
    setSelectedRow(row);
  };

  return (
    <div>
      <table>
        <thead>
          <tr>hello</tr>
        </thead>
        <tbody>
          {/* 这里补了遍历生成行的示例，你原有写法里的row变量要对应实际的行数据 */}
          {[
            {id: 1, content: 'hello1'},
            {id: 2, content: 'hello2'},
            {id: 3, content: 'hello3'},
          ].map(row => (
            <tr 
              key={row.id}
              data-mdb-toggle="modal" 
              data-mdb-target="#updateModal" 
              onClick={() => selectRow(row)}
            >
              <td>{row.content}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {/* 加key属性强制每次selectedRow变化时重渲染，key用行唯一id即可 */}
      {selectedRow && <UpdateModal key={selectedRow.id} selectedRow={selectedRow} />}
    </div>
  )
}

export default Table

额外说明 #

如果你想完全用React控制模态框，不想用Bootstrap的data属性，可以在selectRow里直接控制模态框显隐，UpdateModal内部也同步用props接收显隐状态即可，逻辑会更可控。

内容的提问来源于stack exchange，提问作者user13688715