我想提醒是否有任何JSON值更改，然后在狀態下對其進行更新，然后再進行console.log

Question

我正在尋找JSON更改的警報，然后它將更新狀態並警告數據已更改。不幸的是，盡管JSON數據沒有更改，但此步驟在循環執行，表示“數據已更改”。

這是我的代碼示例

import React, { Component } from 'react'

class Api extends Component {
    constructor(props) {
        super(props)    
        this.state = {
            Old_item: []
        }

    }
    GetCryptoData (){
        const dataURL = "https://api.coinmarketcap.com/v1/ticker/bitcoin/";
        fetch(dataURL)
        .then(d => d.json())
        .then(d => {
            if (this.state.Old_item !== d[0]) {
                this.setState({ Old_item: d[0] })
                console.log("data changed");                 
            }

        })

    }

    componentDidMount(nextState) {
        this.GetCryptoData();
        setInterval(this.GetCryptoData.bind(this), 10000);
    };

    render() {
        return (
            <div>                
                {this.state.Old_item.price_usd}
            </div>
        )
    }
}
export default Api

Answer 1

那是因為您試圖比較兩個對象。 請參見下面的代碼。

let a = {'a':1};
let b = {'a':1};
if(a!==b){
    alert('Not Same!');
}else{
    alert('Same!');
}

你覺得他們一樣嗎？ 是的，它們適用於我們，但對於JavaScript而言，則不是，因為當您比較它們時，它們的引用並不相同。

因此，最好是可以基於JSON中的某些屬性進行比較或檢查。

Answer 2

您需要在當前代碼中進行一些更改

1. 您以錯誤的方式進行比較。 這不是比較對象數組的正確方法。 您需要比較鍵以檢查值是否已更改
2. setState是異步的，因此在設置狀態之前，console.log可能會觸發，也可能不會觸發。 因此，這就是為什么控制台應位於setState的回調中的原因。

您的新代碼如下所示

class Api extends Component {
constructor(props) {
    super(props)    
    this.state = {
        Old_item: []
    }

}
GetCryptoData (){
    const dataURL = "https://api.coinmarketcap.com/v1/ticker/bitcoin/";
    fetch(dataURL)
    .then(d => d.json())
    .then(d => {
        if (this.state.Old_item["INDEX"]["YOUR KEY"] !== d["INDEX]["YOUR KEY"]) {
            this.setState({ Old_item: d[0] },()=>{
             console.log("data changed"); 
             })

        }

    })

}

componentDidMount(nextState) {
    this.GetCryptoData();
    setInterval(this.GetCryptoData.bind(this), 10000);
};

render() {
    return (
        <div>                
            {this.state.Old_item.price_usd}
        </div>
    )
}}
export default Api

Answer 3

只要兩個對象的結構相同，我就編寫了一個比較兩個對象值的函數。

盡管尚未完全優化，但可以為您完成工作。

 function compareObject(obj1, obj2) { const keys = Object.keys(obj1); const result = []; keys.forEach(key => { if (obj1[key] === obj2[key]) { result.push(1); } else { result.push(0); } }); if (result.indexOf(0) === -1) { return true; } return -1; } const a ={ "id": "bitcoin", "name": "Bitcoin", "symbol": "BTC", "rank": "1", "price_usd": "10326.8374041", "price_btc": "1.0", "24h_volume_usd": "24838329700.1", "market_cap_usd": "184082454924", "available_supply": "17825637.0", "total_supply": "17825637.0", "max_supply": "21000000.0", "percent_change_1h": "-0.46", "percent_change_24h": "6.27", "percent_change_7d": "-11.22", "last_updated": "1563537331" }; const b = { "id": "bitcoin", "name": "Bitcoin", "symbol": "BTC", "rank": "1", "price_usd": "10326.8374041", "price_btc": "1.0", "24h_volume_usd": "24838329700.1", "market_cap_usd": "184082454924", "available_supply": "17825637.0", "total_supply": "17825637.0", "max_supply": "21000000.0", "percent_change_1h": "-0.46", "percent_change_24h": "6.27", "percent_change_7d": "-11.22", "last_updated": "1563537331" }; alert(compareObject(a, b)); 

GetCryptoData (){
const dataURL = "https://api.coinmarketcap.com/v1/ticker/bitcoin/";
fetch(dataURL)
.then(d => d.json())
.then(d => {
    if (compareObject(this.state.Old_item[0], d[0]) {
        this.setState({ Old_item: d[0] });
    }

})

}

Answer 4

就像上面提到的每個對象一樣，您不能像這樣比較對象。 因為對象不是原始文字。 意味着它們是通過引用而不是通過值傳遞的。 簡單來說

let obj1 = { a: 1 };
let obj2 = { a : 1 };

obj1 !== obj2;

因此，我通常使用自己的不同功能來比較對象。 如果只需要做一個淺表比較，那么下面的簡單函數就足夠了。 如果您需要的不僅僅是淺層比較，那么您將需要更復雜的功能。

const areObjectsEqual = (obj1 = {}, obj2 = {}) => Object
  .keys(obj1).length === Object.keys(obj2).length
  && Object.keys(obj1).every(key => obj1[key] === obj2[key]);

而不是使用：

如果（this.state.Old_item！== d [0]）

做就是了

如果（！areObjectsEqual（this.state.Old_item，d [0]）

如果問題仍然存在，則可能是由於對象深層嵌套或由於狀態的異步性質。 因此，您將不得不考慮這些因素。