React Table isLoading 属性答案

【问题标题】：React Table isLoading propertyReact Table isLoading 属性
【发布时间】：2020-07-10 07:14:36
【问题描述】：

我找到了这篇关于创建 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,
            })
        })

我已经为这个问题苦苦挣扎了将近一个星期。我真的需要帮助来理解这段代码。提前谢谢你。

【问题讨论】：

标签： javascript reactjs react-table-v6

【解决方案1】：

您需要以某种方式向用户显示页面正在加载数据并且数据尚未加载。 ReactTable 有一个属性（loading 我认为它也有 loadingText 在加载/获取数据时显示消息），所以当你加载你的页面时，isLoading 设置为 true

当您的 async/await 代码完成并从 url 获取数据时，isLoading 设置为 false 并且 ReactTable 会相应更新。

【讨论】：

这是有道理的。谢谢你的解释。

【解决方案2】：

在您的情况下，受益者是在数据可用时了解您的 ReactTable 组件。

但在许多情况下，您会使用它来告诉您的用户。嘿，我现在正在执行一项任务，当该任务正在进行时，您可以显示一个微调器或简单的文本，例如“请稍等，我们正在验证您的帐户”，让他知道您实际执行了一项任务并改善用户体验.

【讨论】：

感谢您的解释。我现在可以很好地理解它了。

【解决方案3】：

你可以忽略它，不需要运行代码。即使对于加载程序，检查movies.length > 0 就足够了，所以删除它

【讨论】：