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

Posted 2023-03-08

【中文标题】一直在使用 React，如何设置超时或创建一个类似于每隔几分钟显示来自 graphql api 的新数据的数据轮播？

【英文标题】：Have been using React, how to setTimeout or create a Data Carousel like thing which shows new data from a graphql api every couple of mins?

【发布时间】：2018-04-04 18:57:09

【问题描述】：

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

【参考方案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>
        )
    

【参考方案2】：

这里是：

this.setState是你问题的关键

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