在 React 中实现加载器

Question

我正在尝试实现一个加载程序，如果组件尚未从 API 接收到数据，则会显示该加载程序。这是我的代码：

import React, {Component} from 'react'

import './news-cards-pool.css'

import NewsService from '../../services/news-service'
import NewsCard from '../news-card'
import Loader from '../loader'

interface NewsCardsPoolProps {
    currentCategory: string
}

interface NewsCardsPoolStates {
    newsList: Article[],
    currentCategory: string,
}
interface Article {
    title: string,
    description: string,
    url: string,
    image: string
}

export default class NewsCardsPool extends Component<NewsCardsPoolProps, NewsCardsPoolStates> {

    newsService = new NewsService()

    state = {
        newsList: [],
        currentCategory: ''
    }

    componentDidUpdate(prevProps: Readonly<NewsCardsPoolProps>) {
        if(prevProps.currentCategory !== this.props.currentCategory) {
            this.updateNews()
        }
    }

    componentDidMount() {
        this.updateNews()
    }

    updateNews(){
        this.newsService.getByCategory(this.props.currentCategory).then((list: Article[]) => {
            console.log(list)
            this.setState({
                currentCategory: this.props.currentCategory,
                newsList: list
            })
        })
    }

    renderItems(newsList: Article[]){
        const itemsList = newsList.map((article: Article) => {
            return(
                <div className="col-sm-12 col-md-6 col-lg-3 card-container">
                    <div className="card">
                        <img src={article.image} alt="icon" />
                        <div className="info">
                            <h5><a href={article.url}>{article.title}</a></h5>
                            <p>{article.description}</p>
                        </div>
                    </div>
                </div>
            )
        })

        return itemsList
    }

    render() {
        const { newsList } = this.state
        if (newsList === []){
            return <Loader />
        }

        return this.renderItems(newsList)
    }
}

问题是这个等式总是给出错误，但是，console.log() 显示数组为空，我错过了什么？即使将 newsList 的 .setstate 设置为 []，也会发生同样的事情。我正在使用带有打字稿的 React。提前致谢！

Answer 1

javascript中的数组是对象，保存在堆上。当您使用“===”（严格相等运算符）时，您是在询问它们是否真的是相同的对象，它们不是，因为它们将被保存到不同的内存地址。

改用newsList.length === 0检查数组是否为空

您可以使用一些技巧 type-coercion 但这不是最佳做法。（松散相等运算符“==”进行类型强制转换）

Answer 2

[] === []

或

<<everything>> === []

return 假

除了

const a = []
a===a

将 return 正确

阅读更多内容 value versus reference

Answer 3

您还可以创建一个特定的状态来处理这种情况。你所做的是：

添加另一个状态并将其设置为 true。

示例：

state = {
  newsList: [],
  currentCategory: '',
  loadingData: true
}

加载数据时将其设置为 false。

示例：

updateNews(){
    this.newsService.getByCategory(this.props.currentCategory).then((list: Article[]) => {
    console.log(list)
    this.setState({
      currentCategory: this.props.currentCategory,
      newsList: list,
      loadingData: false
    })
  })
};

在您的 if 语句中，确保在继续之前加载为 false。

示例：

const { newsList } = this.state
  if (newsList.loadingData){
    return <Loader />
  }

在 React 中实现加载器

Implementing loader in React

typescript

reactjs

react-lifecycle

react-state