Javascript 在等待渲染时如何放置加载

我刚刚用css制作了一个动画“加载…”，但我希望它只在等待数据加载/渲染时存在。。你知道我怎么真的不知道我怎么会对这件事这么陌生吗

这是我的组件

componentDidMount() {
  $.ajax({
  url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
  success:(data)=>{

    this.setState({
      jsonReturnedValue:data
    })
  }
})
  this.setState({isLoading: false})   
}

这是我的作品

renderItem(d, i) {
  return <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><button className ='btn btn-danger'  onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>
    </tr>
}

render() {
      if(this.state.isLoading) {
           return <span className="Loader">
          <div className="Loader-indicator" >
            <h1>
              <span>Loading</span>
              <span className="Loader-ellipsis" >
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
              </span>
            </h1>
          </div>
        </span>
     }

    let {jsonReturnedValue} = this.state;
    const isEnabled = this.canBeSubmitted();


  return(
    <div>
    <div>

        <div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>

            </table>
          </div>

renderItem（d，i）{
返回
{d.Employee_ID}
{d.Employee_Name}
{d.Address}
编辑
删除
}
render（）{
if（此.state.isLoading）{
返回
加载
.
.
.
}
让{jsonReturnedValue}=this.state；
const isEnabled=this.canbesubmited（）；
返回(
雇员名单
添加员工
身份证件
名称
地址
更新
删除
{jsonReturnedValue.map（（d，i）=>this.renderItem（d，i））}

在react组件中维护一个状态，该状态在您调用加载数据时设置为true

乙二醇

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={isLoading:true}
}
componentDidMount（）{
$.ajax({
网址：'http://localhost:5118/api/employeedetails/getemployeedetails/',
成功：（数据）=>{
这是我的国家({
jsonReturnedValue:数据，isLoading:false
})
}
})
}
render（）{
if（此.state.isLoading）{
返回
加载
.
.
.
}
返回(
你好，世界
)
}

请参阅演示片段

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={isLoading:true}
}
componentDidMount（）{
setTimeout（（）=>{this.setState（{isLoading:false}}），3000）
}
render（）{
if（此.state.isLoading）{
返回
加载
.
.
.
}
返回(
你好，世界
)
}
}    
ReactDOM.render（，document.getElementById（'app'）；

---

在react组件中维护一个状态，该状态在您调用加载数据时设置为true

乙二醇

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={isLoading:true}
}
componentDidMount（）{
$.ajax({
网址：'http://localhost:5118/api/employeedetails/getemployeedetails/',
成功：（数据）=>{
这是我的国家({
jsonReturnedValue:数据，isLoading:false
})
}
})
}
render（）{
if（此.state.isLoading）{
返回
加载
.
.
.
}
返回(
你好，世界
)
}

请参阅演示片段

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={isLoading:true}
}
componentDidMount（）{
setTimeout（（）=>{this.setState（{isLoading:false}}），3000）
}
render（）{
if（此.state.isLoading）{
返回
加载
.
.
.
}
返回(
你好，世界
)
}
}    
ReactDOM.render（，document.getElementById（'app'）；

---

添加

加载

状态，并在加载数据时使其为真

在

render（）

函数中，使用

？

操作符添加加载状态代码

{this.state.loading ? (<YourComponent />) : (<LoadingState />)}

{this.state.loading？（）：（）}

---

用您的组件或所需的jsx标记替换

和

。

添加

加载状态，并在加载数据时使其为真

在
render（）
函数中，使用
？
操作符添加加载状态代码

{this.state.loading ? (<YourComponent />) : (<LoadingState />)}

{this.state.loading？（）：（）}

用您的组件或所需的jsx标记替换
和
。
我对您的解释感到困惑NVM，Shubham Khatri编写相同的概念我对您的解释感到困惑NVM，Shubham Khatri编写相同的概念当您将加载状态设置为false时，它将输出您的数据，就像我在我的案例中所做的那样。您的数据将在我需要的位置执行ve
return（Hello-World）
我做了与您相同的事情，但是它没有输出我的表，但它不工作，它仍然在加载..您是在数据加载
this.setState（{isLoading:false}）后执行此操作的吗
我把它放在ComponentDidMount中我的ajax下，你能在你的问题中添加这一部分吗？当你将加载状态设置为false时，它会输出你的数据，就像我在我的例子中所做的那样。你的数据会在我有
返回的地方执行（Hello World）
我做了和你放的一样的事情，但是它没有输出我的表，但是它没有工作，它仍然在加载..你是在数据加载后这样做的吗
this.setState（{isLoading:false}）
我把它放在ComponentDidMount中的我的ajax下你能在你的问题中添加这一部分吗