javascript - 一直在使用 React，如何设置超时或创建一个类似于每隔几分钟从 graphql api 显示新数据的数据轮播？

Question

从graphql api查询数据，将其存储在一个数组中，现在必须使用setTimeout或interval显示它（想象一个在特定时间后自动更改的数据轮播）我如何实现它？

Answer 1

重要的是要确保在卸载组件时清除间隔。否则，您最终会收到一组令人讨厌的错误消息，其中提到您如何在“未安装”组件上设置状态。

import React, { Component } from 'react'

class Carousel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            intervalId = 0,
            updatedProps: {}
        }
    }
    componentDidMount() {
        let self = this;
        let id = setInterval(function() {
            // GRAPHQL => data
            this.setState({updatedProps: data, intervalId: id})
        })
    }
    componentWillUnMount() {
        clearInterval(this.state.intervalId)
    }
    render() {
        return (
            <div>
                <Carousel 
                    props={this.state.updatedProps}
                />
            </div>
        )
    }
}

Answer 2

这里是：

this.setState是你问题的关键

setInterval(() => {
    call.to.api(data => {
        this.setState({graphql_data});
        // this will update your ui, as soon as state is set
    })
},miliseconds)