Javascript 我的应用程序没有呈现简单的<；h1>；在react js中添加标记

因此，我正在制作一个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

import React，{Component}来自“React”
从“react dom”导入react dom
导入“/App.css”；
从“./title”导入标题；
从“react paginate”导入react paginate
从“axios”导入axios
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
用户：[]，
孤岛加载：false，
伊瑟罗：错，
};
}
//异步函数获取请求
异步组件didmount（）{
this.setState（{isLoading:true}）
const response=等待获取（“https://reqres.in/api/users?page=1")
const secu_response=等待获取（“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）*/
如果（sec_response.ok）{
const sec_fetchedData=wait sec_response.json（）
var sec_userData=this.state.users.concat（sec_fetchedData.data）
this.setState（{users:sec_userData}）
console.log（this.users）
}
}否则{
this.setState（{isError:true，isLoading:false}）
}    
}
renderTableRows=（）=>{
返回此.state.users.map（user=>{
返回(
{user.first_name}
)
})
}
render（）{
const{users，isLoading，isError}=this.state
常量元素=用户列表
如果（孤岛加载）{
返回加载。。。
}
如果（isError）{
返回错误。。。
}
console.log（用户）
返回(
{/*{this.renderTableHeader（）}*/}
{this.renderTableRows（）}
)
ReactDOM.render(
元素，
document.getElementById（'root'））
);
}
}
导出默认应用程序

ReactDOM.render(
元素，
document.getElementById（'root'））
);

是否错误？您需要在其中安装应用程序，如下所示：

ReactDOM.render(
,
document.getElementById（'root'））
);

并在App render方法中渲染元素，如下所示：

返回(
{element}
...
)

在

return

语句中定义

h1

标记

在应用程序中删除

ReactDOM.render

。在您的情况下，整个应用程序中应该只有一个

ReactDOM.render

函数调用

返回(
用户列表
)
导出默认应用程序

您的

标签在哪里？您的代码中没有标签

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

export default App