我刚刚用css制作了一个动画“加载..”,但我希望它只在等待数据加载/渲染时才存在..任何想法我真的不知道知道如何IM这么新呢?...如何在等待渲染时加载加载Reactjs
这是我componentdidmount
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>
它将输出数据时您加载状态设置为false,因为我在我的情况一样。你的数据将在我已经返回的地方完成(
我做了同样的事情,但你把它,而不是你好世界它输出我的表,但它不工作,它仍然正在加载.. –
你在做什么这是在你的数据加载后'this.setState({isLoading:false})' –