反应：使用json API调用的新信息自动更新日期和视图

我正在调用coinmarketcap.com API中的数据，无法找到使代码自动更新的方法。我想让这个代码每30秒左右更新一次信息

如果我称某件事为错误的事。。。或者这是一个基本的问题，对不起，这是我第一周和React在一起

这是我所拥有的，当应用程序首次加载时，它可以很好地从coinmarketcap.com加载信息

主要组件（文件：Crypto.jsx）

import React，{Component}来自'React'；
从“./parts/CryptoItem”导入CryptoItem；
类加密扩展组件{
render（）{
返回(
);
}
}
导出默认密码；

子组件（文件：/parts/CryptoItem.jsx）

import React，{Component}来自'React'；
const urlForUsername=cryptocoin=>`https://api.coinmarketcap.com/v1/ticker/${cryptocoin}/`
类CryptoItem扩展组件{
建造师（道具）{
超级（道具）
此.state={
请求失败：false
}
}
componentDidMount（）{
fetch（urlForUsername（this.props.cryptocoin））
。然后（响应=>{
如果（！response.ok）{
抛出错误（“网络请求失败”）
}
返回响应
})
.then（d=>d.json（））
.然后（d=>{
这是我的国家({
加密数据：d[0]
})
},() => {
这是我的国家({
请求失败：true
})
})
}
render（）{
如果（this.state.requestFailed）返回失败

如果（！this.state.cryptoData）返回正在加载

报税表（


{this.state.cryptoData.name}：


${this.state.cryptoData.price_usd}


{this.state.cryptoData.percent_change_24h}%


);
}
}
导出默认加密项；

首先，将子组件中的componentDidMount方法中的逻辑提取到一个单独的方法中，如下所示

fetchResult=（）=>{
fetch（urlForUsername（this.props.cryptocoin））
。然后（响应=>{
如果（！response.ok）{
抛出错误（“网络请求失败”）
}
返回响应
})
.then（d=>d.json（））
.然后（d=>{
这是我的国家({
加密数据：d[0]
})
},() => {
这是我的国家({
请求失败：true
})
})
}

首先，将子组件中的componentDidMount方法中的逻辑提取到一个单独的方法中，如下所示

fetchResult=（）=>{
fetch（urlForUsername（this.props.cryptocoin））
。然后（响应=>{
如果（！response.ok）{
抛出错误（“网络请求失败”）
}
返回响应
})
.then（d=>d.json（））
.然后（d=>{
这是我的国家({
加密数据：d[0]
})
},() => {
这是我的国家({
请求失败：true
})
})
}

添加

componentDidMount（）{setInterval（this.fetchResult，30000）}

时出错，并显示以下消息：NotFoundError:未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。然而，如果我这样做，它的工作只是伟大的

componentDidMount（）{this.fetchResult（）setInterval（this.fetchResult，30000）}

Yes。我已经更新了我的答案。您需要第一次手动调用此.fetchResult（）方法。否则，它将在30秒后第一次被调用。经过一些测试后，这似乎并不完全有效。我可以看到它拉着更新的JSON数据。但它并没有更新视图。所以我在页面上的所有信息都保持不变。所以我在这里调用文件：/parts/CryptoItem.jsx中的

{this.state.cryptoData.price_usd}

。该信息不会更改。是否只有this.state.cryptoData.price\u usd属性未更新？该行中有一个无效的起始$。此外，无论出于何种原因，如果第一个请求未在30秒内完成，则将启动第二个请求。我认为最好的解决办法是使用Flux。很抱歉，是我的错误使它无法工作。再次感谢您的帮助。添加

componentDidMount（）{setInterval（this.fetchResult，30000）}

It会出错，并显示以下消息：NotFoundError:未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。然而，如果我这样做，它的工作只是伟大的

componentDidMount（）{this.fetchResult（）setInterval（this.fetchResult，30000）}

Yes。我已经更新了我的答案。您需要第一次手动调用此.fetchResult（）方法。否则，它将在30秒后第一次被调用。经过一些测试后，这似乎并不完全有效。我可以看到它拉着更新的JSON数据。但它并没有更新视图。所以我在页面上的所有信息都保持不变。所以我在这里调用文件：/parts/CryptoItem.jsx中的

{this.state.cryptoData.price_usd}

。这些信息确实有用

import React, { Component } from 'react';

import CryptoItem from './parts/CryptoItem';

class Crypto extends Component{
render(){

return(
    <div id="CryptoItems">
        <div id="data">
            <CryptoItem cryptocoin="bitcoin" />
            <CryptoItem cryptocoin="ethereum" />
            <CryptoItem cryptocoin="ripple" />
            <CryptoItem cryptocoin="iconomi" />
            <CryptoItem cryptocoin="litecoin" />
            <CryptoItem cryptocoin="bitcoin-cash" />
        </div>
    </div>
    );
  }
}

export default Crypto;

        import React, { Component } from 'react';

    const urlForUsername = cryptocoin => `https://api.coinmarketcap.com/v1/ticker/${cryptocoin}/`

    class CryptoItem extends Component {

        constructor(props){
            super(props)
            this.state = {
                requestFailed: false
            }
        }

        componentDidMount(){
            fetch(urlForUsername(this.props.cryptocoin))
            .then(response =>{
                if(!response.ok){
                    throw Error("Network request failed")
                }
                return response
            })
            .then(d => d.json())
            .then(d => {
                this.setState({
                    cryptoData: d[0]
                })
            },() => {
                this.setState({
                    requestFailed: true
                })
            })
        }


        render() {
            if(this.state.requestFailed) return <p>Failed...</p>
            if(!this.state.cryptoData) return <p>Loading...</p>

            return(    
                <ul className="CryptoItem" data-sort={ `${this.state.cryptoData.percent_change_24h}` } id={ `${this.state.cryptoData.symbol}PriceChangeID` }>
                    <li>
                        {this.state.cryptoData.name}:
                    </li>
                    <li>
                        $ <span id={ `${this.state.cryptoData.symbol}Price` }>{this.state.cryptoData.price_usd}</span>
                    </li>
                    <li className="PreCentChange">
                        <span id={ `${this.state.cryptoData.symbol}PriceChange` }>{this.state.cryptoData.percent_change_24h}</span><b>%</b>
                    </li>
                </ul>
            );
        }
    }
    export default CryptoItem;