Question

我试图以3秒的间隔连续调用api。我尝试使用async和setInterval，但根本不起作用。让我们在下面看我的代码

component.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { fetchMarketCap } from '../Actions/Marketcap';

class Header extends Component{
    componentDidMount(){
        setInterval(this.props.fetchMarketCap(), 3000);
    }
    render(){
        const marketcap = this.props.marketcap.map(coin => (
                <div key={coin.CoinInfo.Id}>
                    <h5>{coin.CoinInfo.Name}</h5>
                    <h5>{coin.RAW.USD.CHANGE24HOUR}</h5>
                </div>
        ));
        return (
            <div>
                {marketcap}
            </div>

        );
    }
}
const mapStateToProps = state => ({
    marketcap: state.marketcap.coins
});
export default connect ( mapStateToProps, { fetchMarketCap } )(Header);

和预期措施文件Marketcap.js

import { FETCH_MARKET_CAP, FETCH_MARKET_CAP_SUCCEED, FETCH_MARKET_CAP_FAILED } from './Types';

export const fetchMarketCap = async () => async dispatch => {
    const res = await fetch('https://min-api.cryptocompare.com/data/top/mktcapfull?limit=10&tsym=USD&api_key=46e898b0b5d0319ab6fb94aae5ed2f1a388ff650bffefa1f32f5af1479766b4f');
    const response = await res.json()
        .then( marketcaps => 
            dispatch({
                type: FETCH_MARKET_CAP_SUCCEED,
                payload: marketcaps.Data
            })
        )
}

但是在控制台的控制台SyntaxError: Unexpected token (10:52) in Marketcap.js.Unexpected token (10:52) You may need an appropriate loader to handle this file type.中。我该如何解决？

Answer 1

一个明显的事情是使用async关键字...像这样摆脱第一个async：

export const fetchMarketCap = () => async dispatch => {
    const res = await fetch('https://min-api.cryptocompare.com/data/top/mktcapfull?limit=10&tsym=USD&api_key=46e898b0b5d0319ab6fb94aae5ed2f1a388ff650bffefa1f32f5af1479766b4f');
    const response = await res.json()
        .then( marketcaps => 
            dispatch({
                type: FETCH_MARKET_CAP_SUCCEED,
                payload: marketcaps.Data
            })
        )
}

Answer 2

我过去通过使用Redux-Sagas中间件来做到这一点。它使您可以每x秒轮询一次，并允许您使用操作启动和停止轮询。

有关更多详细信息，请参见以下答案：https://stackoverflow.com/a/52422831/6640093

每3秒钟在react-redux中调用一次API

2 个答案: