React Table isLoading 屬性

Question

我發現這篇關於創建 MERN 項目https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66 的教程文章. 一切正常，但我對 MoviesList.jsx 文件中componentDidMount() function 中的這段代碼感到困惑：

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

為什么我們必須在此代碼中設置 isLoading: true this.setState({ isLoading: true }) ，然后使用以下代碼將其設置回 false：

await api.getAllMovies().then(movies => {
            this.setState({
                movies: movies.data.data,
                isLoading: false,
            })
        })

我已經為這個問題苦苦掙扎了將近一個星期。 我真的需要幫助來理解這段代碼。 先感謝您。

Answer 1

您需要以某種方式向用戶顯示頁面正在加載數據並且數據尚未加載。 ReactTable有一個屬性（ loading ，我認為它也有loadingText在加載/獲取數據時顯示消息），所以當你加載你的頁面時， isLoading設置為true

當您的async/await代碼完成並從 url 獲取數據時， isLoading設置為false並相應地更新ReactTable 。

Answer 2

在您的情況下，受益者是在數據可用時了解您的 ReactTable 組件。

但在許多情況下，您將使用它來告訴您的用戶。 嘿，我現在正在執行一項任務，當該任務正在進行時，您可以顯示一個微調器或簡單的文本，例如“請稍等，我們正在驗證您的帳戶”，讓他知道您實際執行了一項任務並改善用戶體驗.

Answer 3

你可以忽略它，沒有必要運行代碼。 即使對於加載程序，檢查movies.length> 0就足夠了，所以刪除它