时间戳

首页 > 解决方案 > 设置间隔不会更新我的 UI 上的价格（reactjs）

reactjs - 设置间隔不会更新我的 UI 上的价格（reactjs）

问题描述

我在这里有这个代码来 setInterval 以在我的反应站点上每秒更新价格：

import React, { Component } from 'react'
import './Coin.css'
import PropTypes from 'prop-types';

export default class Coin extends Component {
    constructor(props){
        super(props);
        this.state = {
            price: this.props.price 
        }
    }
    componentDidMount(){
        const callback = () => {
            //set the state to a new random value
            const randomPercentage = 0.995 + Math.random() * 0.01;
            // Dont do this:
            // this.state.price = this.state.price * randomPercentage:

            this.setState(function(oldState){
                return {
                    price: oldState.price * randomPercentage
                };
            });
        }
        setInterval(callback, 1000);  
    }
    render() {
        return (
            <tr className="coin-row">
                <td>{this.props.name}</td>
                <td>{this.props.ticker}</td>
                <td>${this.props.price}</td>
            </tr>
        );
    }
}

Coin.propTypes = {
    name:PropTypes.string.isRequired,
    ticker: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired
}

当我运行这个应用程序时，我网站上的价格应该每秒更新一些随机数

这是我的用户界面截图 在此处输入图像描述

当我运行它时，什么都没有发生——价格不是每秒都在变化，我的控制台也没有错误。我唯一看到的是控制台中的这个条目：

[HMR] Waiting for update signal from WDS...

这里有什么问题？我该如何解决？

这是教程的屏幕截图，他的代码正在运行 https://imgur.com/a/Ol1rrZf

标签： reactjs

解决方案

代替

<td>${this.props.price}</td>和<td>${this.state.price}</td>

推荐阅读