как визуализировать каждый элемент в массиве через каждые три секунды с промежуточной анимацией ожидания в React

Question

Предположим, у меня есть компонент List:

import React, { Component } from 'react';

class List extends Component {

    constructor() {
        super();
        this.state = {
            list: [1, 2, 3, 5]
        }
    }

    render() {
        return(
            <ul>
                <li>{this.state.list}</li>
            </ul>
        );
    }

}

export default List;

Мой желаемый вывод - отображать «1», затем отображать «...» в течение трех секунд, чтобы имитировать «загрузку», а когда три секундывверх, скрыть «...» и отобразить 2, затем отобразить «...» в течение трех секунд и так далее, пока не отобразится 5. Таким образом, окончательный результат будет выглядеть так:

1

2

3

4

5

,Спасибо!

Answer 1

Мне кажется, что это можно было гуглить или что-то еще, прежде чем публиковать здесь на SO.

Однако, это поведение, которое вы хотите?

import React from "react";

class State {
    list: any[];
}

class List extends React.Component<{}, State> {
    constructor(props) {
        super(props);

        this.state = {
            list: []
        };

        let intervalCount = 0;
        let self = this;

        let arr = self.state.list;
        let interval = setInterval(function() {
            intervalCount++;
            arr.push(intervalCount);
            self.setState({
                list: arr
            });

            if (intervalCount == 5) {
                clearInterval(interval);
            }
        }, 3000);
    }

    render() {
        return (
            <ul>
                {this.state.list.map(function(item, index) {
                    return <li key={index}>{item}</li>;
                })}
                <li>...</li>
            </ul>
        );
    }
}

export default List;