反应 Table 正在加载 属性
React Table isLoading property
我找到了这篇关于创建 MERN 项目的教程文章 https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66。一切正常,但我对 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-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
为什么我们必须在此代码 this.setState({ isLoading: true })
中设置 isLoading: true,然后使用此代码将其设置回 false :
await api.getAllMovies().then(movies => {
this.setState({
movies: movies.data.data,
isLoading: false,
})
})
我已经为这个问题苦苦挣扎了将近一个星期。我真的需要帮助来理解这段代码。提前谢谢你。
您需要以某种方式向用户显示页面正在加载数据,而数据尚未加载。 ReactTable
为此有一个 属性(loading
,我认为它也有 loadingText
可以在 loading/fetching 数据时显示消息),所以当你加载你的页面,isLoading
设置为 true
当您的 async/await
代码完成并从 url 获取数据时,isLoading
将设置为 false
并且 ReactTable
会相应更新。
在您的情况下,受益者是在数据可用时了解您的 ReactTable 组件。
但是很多时候你会用这个来告诉你的用户。
嘿,我现在正在执行一项任务,当该任务正在进行时,您可以显示一个微调器或一个简单的文本,例如“请稍等,我们正在验证您的帐户”,让他知道您实际上正在执行一项任务并改善用户体验.
可以无视,没必要运行代码。
即使对于加载程序来说,检查 movies.length > 0 就足够了,所以删除它
我找到了这篇关于创建 MERN 项目的教程文章 https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66。一切正常,但我对 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-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
为什么我们必须在此代码 this.setState({ isLoading: true })
中设置 isLoading: true,然后使用此代码将其设置回 false :
await api.getAllMovies().then(movies => {
this.setState({
movies: movies.data.data,
isLoading: false,
})
})
我已经为这个问题苦苦挣扎了将近一个星期。我真的需要帮助来理解这段代码。提前谢谢你。
您需要以某种方式向用户显示页面正在加载数据,而数据尚未加载。 ReactTable
为此有一个 属性(loading
,我认为它也有 loadingText
可以在 loading/fetching 数据时显示消息),所以当你加载你的页面,isLoading
设置为 true
当您的 async/await
代码完成并从 url 获取数据时,isLoading
将设置为 false
并且 ReactTable
会相应更新。
在您的情况下,受益者是在数据可用时了解您的 ReactTable 组件。
但是很多时候你会用这个来告诉你的用户。 嘿,我现在正在执行一项任务,当该任务正在进行时,您可以显示一个微调器或一个简单的文本,例如“请稍等,我们正在验证您的帐户”,让他知道您实际上正在执行一项任务并改善用户体验.
可以无视,没必要运行代码。 即使对于加载程序来说,检查 movies.length > 0 就足够了,所以删除它