Javascript 不渲染具有HTML参数的React元素

在一个页面上，我有一个嵌入HTML中的元素:

{dataTable}

初始化为:

  const [dataTable, setDataTable] = useState(<p>Data Table Loading...</p>);

并在useEffect函数中进行更新，我在其中调用数据库(supply PostgreSQL)，以获取待办事项的数据.

let dataTable = <DataTable todos={todos} todoLogs={todoLogs} deleteTodo={deleteTodo} toggleTodo={toggleTodo}></DataTable>

setDataTable(dataTable)

但当它嵌入到页面中时，什么也不会显示，而且我也不会得到任何错误.

其他具有</h1>Hello World</h1>等siple struct 的元素确实会显示在页面上，并且当使用useState()等时，就像dataTable一样

当我console.log() dataTable元素时，我得到:

Browser Console console.log(dataTable) output

Object
$$typeof
: 
Symbol(react.element)
key
: 
null
props
: 
{todos: null, todoLogs: null, deleteTodo: ƒ, toggleTodo: ƒ}
ref
: 
null
type
: 
class DataTable
_owner
: 
null
_store
: 
{validated: true}
_self
: 
undefined
_source
: 
{fileName: 'C:/Users/user123/Desktop/coding-projects/2 }} testin…}/{{REACT}}/table-todo-testing/src/pages/Home.jsx', lineNumber: 132, columnNumber: 21}
[[Prototype]]
: 
Object

如果您感兴趣，以下是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("22 could not render table, data not available", error)

    }

    // Render the table with the generated rows
    
  }
}

谢谢

我try 过:

• 研究问题

• try 嵌入其他html元素并获得结果

• 确保代码的其他部分无错误