React状态更新后DOM元素未更新的问题排查

我用useState()管理了一个React变量dataTable，用来存储表格元素，在DOM里以{dataTable}的方式渲染。但调用setDataTable()更新它时，控制台能看到值已经变化，DOM却没有更新。其他简单变量（比如数字）用同样方式展示却能正常更新。

更新表格的代码：

setDataTable(
  <DataTable
    todos={todos}
    todoLogs={todoLogs}
    deleteTodo={deleteTodo}
    toggleTodo={toggleTodo}
  ></DataTable>
)

DataTable类组件代码：

class DataTable extends React.Component {
  constructor(props) {
    super(props);
    this.todos = props.todos;
    this.todoLogs = props.todoLogs;
    this.deleteTodo = props.deleteTodo;
  }

  render() {
    const data = this.todoLogs;

    // Map over the data to generate table rows
    try {
      const tableRows = data.map((todoLog) => (
        <tr key={todoLog.id}>
          <td>{this.todos.find(x => x.id === todoLog.id).title}</td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d09_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d08_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d07_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d06_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d05_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d04_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d03_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d02_04_24}></input></td>
          <td><button><i className="material-icons" onClick={() => {this.deleteTodo(todoLog.id)}}>delete</i></button></td>
        </tr>
      ));

      return (
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>09/04</th>
              <th>08/04</th>
              <th>07/04</th>
              <th>06/04</th>
              <th>05/04</th>
              <th>04/04</th>
              <th>03/04</th>
              <th>02/04</th>
            </tr>
          </thead>
          <tbody>{tableRows}</tbody>
        </table>
      );
    } catch (error) {
      console.log(error);
      return <p>Table Loading...</p>;
    }
  }
}

想问：更新带参数的React组件或HTML元素有没有什么特殊机制？

核心问题1：错误地将组件实例存入state #

React的useState不应该用来存储组件元素（JSX），正确做法是直接在渲染函数里渲染组件，让React自动追踪props变化并触发重渲染。你现在把<DataTable>实例存在state中，相当于手动接管了组件渲染逻辑，React无法感知props更新。

核心问题2：类组件中缓存props导致更新失效 #

DataTable的构造函数里把props.todos、props.todoLogs赋值给this.todos和this.todoLogs，但构造函数仅在组件初始化时执行一次。后续props更新时，this.todos和this.todoLogs不会同步更新，导致render方法始终使用旧值，DOM自然不会变化。

修复步骤： #

1. 移除state存储组件的逻辑，直接在渲染时渲染<DataTable>：

// 删除原有的const [dataTable, setDataTable] = useState(...)
// 直接在组件render中添加：
return (
  <div>
    {/* 其他页面元素 */}
    <DataTable
      todos={todos}
      todoLogs={todoLogs}
      deleteTodo={deleteTodo}
      toggleTodo={toggleTodo}
    />
  </div>
)

2. 修改DataTable组件，取消props缓存：

class DataTable extends React.Component {
  constructor(props) {
    super(props);
    // 仅保留必要初始化，不要缓存props
  }

  render() {
    // 直接使用this.props中的最新值
    const data = this.props.todoLogs;

    try {
      const tableRows = data.map((todoLog) => {
        const todo = this.props.todos.find(x => x.id === todoLog.id);
        return (
          <tr key={todoLog.id}>
            <td>{todo.title}</td>
            {/* 修正onChange逻辑，调用toggleTodo更新状态 */}
            <td><input type="checkbox" onChange={() => this.props.toggleTodo(todoLog.id, 'd09_04_24')} checked={todoLog.d09_04_24} /></td>
            <td><input type="checkbox" onChange={() => this.props.toggleTodo(todoLog.id, 'd08_04_24')} checked={todoLog.d08_04_24} /></td>
            {/* 其余checkbox同理修改 */}
            <td><button><i className="material-icons" onClick={() => this.props.deleteTodo(todoLog.id)}>delete</i></button></td>
          </tr>
        );
      });

      return (
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>09/04</th>
              <th>08/04</th>
              <th>07/04</th>
              <th>06/04</th>
              <th>05/04</th>
              <th>04/04</th>
              <th>03/04</th>
              <th>02/04</th>
            </tr>
          </thead>
          <tbody>{tableRows}</tbody>
        </table>
      );
    } catch (error) {
      console.log(error);
      return <p>Table Loading...</p>;
    }
  }
}

3. 完善toggleTodo逻辑：原来的onChange仅查找todo未执行更新操作，需要让toggleTodo函数修改todoLogs中对应日期的属性值，确保props变化后DataTable能自动重渲染。

额外提示： #

• React核心是状态驱动视图，只需管理好todos和todoLogs这两个核心状态，组件会自动根据状态变化更新视图，无需手动存储组件实例到state。
• 类组件如需监听props变化，可使用componentDidUpdate生命周期钩子，但更推荐直接使用this.props避免缓存问题。

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