Javascript 反应表isLoading属性
我找到了这篇关于创建MERN项目的教程文章。一切正常,但我对MoviesList.jsx文件中的Javascript 反应表isLoading属性,javascript,reactjs,react-table-v6,Javascript,Reactjs,React Table V6,我找到了这篇关于创建MERN项目的教程文章。一切正常,但我对MoviesList.jsx文件中的componentDidMount()函数中的代码感到困惑: import React, { Component } from 'react' import ReactTable from 'react-table' import api from '../api' import styled from 'styled-components' import 'react-table/react-t
componentDidMount()
函数中的代码感到困惑:
import React, { Component } from 'react'
import ReactTable from 'react-table'
import api from '../api'
import styled from 'styled-components'
import 'react-table/react-table.css'
const Wrapper = styled.div`
padding: 0 40px 40px 40px;
`
class MoviesList extends Component {
constructor(props) {
super(props)
this.state = {
movies: [],
columns: [],
isLoading: false,
}
}
componentDidMount = async () => {
this.setState({ isLoading: true })
await api.getAllMovies().then(movies => {
this.setState({
movies: movies.data.data,
isLoading: false,
})
})
}
render() {
const { movies, isLoading } = this.state
console.log('TCL: MoviesList -> render -> movies', movies)
const columns = [
{
Header: 'ID',
accessor: '_id',
filterable: true,
},
{
Header: 'Name',
accessor: 'name',
filterable: true,
},
{
Header: 'Rating',
accessor: 'rating',
filterable: true,
},
{
Header: 'Time',
accessor: 'time',
Cell: props => <span>{props.value.join(' / ')}</span>,
},
]
let showTable = true
if (!movies.length) {
showTable = false
}
return (
<Wrapper>
{showTable && (
<ReactTable
data={movies}
columns={columns}
loading={isLoading}
defaultPageSize={10}
showPageSizeOptions={true}
minRows={0}
/>
)}
</Wrapper>
)
}
}
export default MoviesList
我为这个问题挣扎了将近一个星期。我真的需要帮助理解这段代码。提前谢谢。您需要以某种方式向用户显示页面正在加载数据,而数据尚未加载
ReactTable
对此有一个属性(loading
,我认为它也有loadingText
,以便在加载/获取数据时显示消息),因此当您加载页面时,isLoading
设置为true
当您的
async/await
代码完成并从url获取数据时,isLoading
设置为false
,并且reactable
相应地更新。在您的例子中,好处是当数据可用时,可以知道您的reactable组件
但在很多情况下,你会用它来告诉你的用户。
嘿,我现在正在执行一项任务,当该任务正在进行时,您可以显示一个微调器或一个简单的文本,如“请稍候,我们正在为您的帐户进行设置”,让他知道您实际执行了一项任务,从而改善用户体验。您可以忽略它,不必运行代码。
即使对于加载器,检查movies.length>0也足够了,因此删除它是有意义的。谢谢你的解释。谢谢你的解释。我现在能很好地理解了。
await api.getAllMovies().then(movies => {
this.setState({
movies: movies.data.data,
isLoading: false,
})
})