带有 HTML 参数的 React 元素未渲染

Question

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

{dataTable}

初始化为：

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

并在 useEffect 函数中进行更新，我在其中进行数据库（supabase PostgreSQL）调用，以获取待办事项的数据。

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

setDataTable(dataTable)

但是当它嵌入到页面中时，什么也没有显示，我也没有收到任何错误。

其他具有简单结构的元素，例如

</h1>Hello World</h1>

，确实会显示在页面上，并且在使用 useState() 等时，就像

dataTable

一样

当我

console.log()

dataTable

元素时，我得到：

浏览器控制台console.log(dataTable)输出

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/tobyh/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
    
  }
}

谢谢

我已经尝试过：

• 研究问题

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

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

Answer 1

看起来您的

DataTable

组件无效。

尝试删除渲染组件中的

try/catch

块以确保返回某些内容（

catch

块中的情况并非如此）。

class DataTable extends React.Component {
  render() {
    return <p>Table</p>
  }
}