React Table свойство isLoading

Я нашел эту учебную статью о создании проекта MERN https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66. Все работает нормально, но что меня смущает этот код внутриcomponentDidMount() функция в файле MoviesList.jsx:

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,
            })
        })

Я борюсь с этим вопросом почти неделю. Мне действительно нужна помощь в понимании этого кода. Заранее спасибо.

Источник

3 ответа

Решение

Вам нужно как-то показать пользователю, что страница загружает данные, а данные еще не загружены. ReactTable есть свойство для этого (loading и я думаю, что это тоже loadingText также для отображения сообщения при загрузке / извлечении данных), поэтому при загрузке страницы isLoading установлен на true

Когда ваш async/await код завершается, и данные извлекаются с URL-адреса, isLoading установлен на false а также ReactTable обновляется соответственно.

Источник

Вы можете проигнорировать это, запускать код не обязательно. даже для загрузчика достаточно проверить movies.length > 0, так что удалите

Источник

В вашем случае здесь преимущество состоит в том, чтобы знать ваш компонент ReactTable, когда данные доступны.

Но во многих случаях вы будете использовать это, чтобы сообщить своим пользователям. Привет, я выполняю задание прямо сейчас, пока эта задача выполняется, вы можете показать счетчик или простой текст, например, "пожалуйста, подождите, мы обрабатываем вашу учетную запись", чтобы сообщить ему, что вы действительно выполняете задание и улучшаете UX.

Источник
Другие вопросы по тегам