React Table свойство isLoading - PullRequest
Новая
       41

React Table свойство isLoading

0 голосов
/ 10 июля 2020

Я нашел эту обучающую статью о создании проекта 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 ]

0 голосов
/ 10 июля 2020

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

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

0 голосов
/ 10 июля 2020

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

0 голосов
/ 10 июля 2020

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

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

...