代码之家 › 专栏 › 技术社区 › Toby Hogan

元素React状态更改后未在DOM中更新

react-hooks dom reactjs javascript

Toby Hogan · 技术社区 · 2 年前

我有一个反应变量,叫做 dataTable 使用管理 useState() 它包含一个表元素,嵌入到我的网站的HTML中作为 {dataTable} .

但是,当我用更新它时 setDataTable() ,它的价值做零钱,我可以用 console.log() ,但由于某种原因,它不会在DOM中更新。

当以相同的方式显示时,所有其他更简单的元素(如数字变量)都将在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 回复 | 直到 2 年前

Gabriele Petrioli 2 年前

您的组件未卸载/重新装载。因此,道具中的更改不会被反映出来,因为您已经将它们缓存在构造函数中。

不需要缓存此组件的值。

因此,一种解决方案是只使用 props 直接地

class DataTable extends React.Component {
 // no constructor

  render(){
    const {todoLogs:data, todos, deleteTodo}  = this.props;

    ...
  }
}

( 所以实际上你根本不需要使用类,你可以使用函数组件 )

另一种选择是使用 componentDidUpdate 并检查道具是否已更改,如果已更改,请更新本地缓存的版本( 您还应该对这些使用state,而不是将它们直接存储在 this ).

最后你可以添加一个 key 上 DataTable 触发卸载/重新装载的组件( 不是最有效的方法 )

setDataTable(
  <DataTable
    key={Date.now().toString()}
    todos={todos}
    todoLogs={todoLogs}
    deleteTodo={deleteTodo}
    toggleTodo={toggleTodo}
  ></DataTable>
)