我的应用程序没有在 react js 中呈现简单的 <h1> 标记答案

【问题标题】：My application is not rendering a simple <h1> Tag in react js我的应用程序没有在 react js 中呈现简单的 <h1> 标记
【发布时间】：2021-01-24 17:41:30
【问题描述】：

所以我正在制作一个 UI，在其中我从 reqres api 获取用户的数据，然后我将其与他们的头像一起制作成一个表格，我已经完成了到这里，但问题是我无法在我的网页上呈现简单的标题，我想写一个简单的“用户列表信息”，它不会呈现。

这是我的 App.js:-

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './App.css';
import title from './title';
import ReactPaginate from 'react-paginate'
import axios from 'axios'



class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      users:[],
      isLoading:false,
      isError:false,
    };
  }



  //async function get request

  async componentDidMount (){
    this.setState({isLoading:true})

    const response = await fetch("https://reqres.in/api/users?page=1")
    const sec_response = await fetch("https://reqres.in/api/users?page=2")

    if(response.ok){
      const fetchedData = await response.json()
      var userData = fetchedData.data
      this.setState({users:userData, isLoading:false})
     /* console.log(this.users) */

    if(sec_response.ok){
      const sec_fetchedData = await sec_response.json()
      var sec_userData = this.state.users.concat(sec_fetchedData.data)
      this.setState({users: sec_userData})
      console.log(this.users)
    }

 
    } else{
      this.setState({isError:true, isLoading:false})
    }    
  }





  renderTableRows = () => {
    return this.state.users.map(user => {
      return (
      <div className = "container">
          <tr key={user.id}>
            <div className= "avatar">
              <img src={user.avatar}/>
            </div>
            <td>{user.first_name}</td>
          </tr>
      </div>
        )
    })
  }


  render(){
    
    const {users, isLoading, isError} = this.state
    const element = <h1>USER LIST</h1>

    if(isLoading){
      return <div>Loading...</div>
    }


    if(isError){
      return <div>Error...</div>
    }

    console.log(users)
    return (
        <table>
            <thead>
              <tr>
                {/* {this.renderTableHeader()} */}
              </tr>
            </thead>
            <tbody>
              <div className="rowsName">
                {this.renderTableRows()}
              </div>  
            </tbody>
        </table>
      )

    ReactDOM.render(
      element,
      document.getElementById('root')
    );
  }
}

export default App

【问题讨论】：

你的<h1>标签在哪里？
您的代码中没有

标签： javascript html reactjs jsx

【解决方案1】：

在return 语句中定义h1 标签。
在您的应用程序中删除ReactDOM.render 的使用。在您的情况下，整个应用程序中应该只有一个 ReactDOM.render 函数调用。

return (
 <div>
    <h1>USER LIST</h1>
    <table>
       </** other elements here **/>
    </table>
 </div>
)

export default App

【讨论】：

【解决方案2】：

ReactDOM.render(
      element,
      document.getElementById('root')
    );

错了，您需要像这样在其中安装应用程序：

ReactDOM.render(
      <App />,
      document.getElementById('root')
    );

并像这样在 App 渲染方法中渲染您的元素：

return (
     <div>
       {element}
       ...
     </div>
      )

【讨论】：