當狀態項不是集合時，在React中設置狀態的正確方法

Question

我正在處理股票和貴金屬價格等實時財務數據。 我每隔幾秒鍾就會命中一次API，以獲取給定資產的最新價格並將該價格存儲在狀態中。 但是，我總是用一個數組或對象數組更新狀態，但是此數據只是一個字符串。 如果最新的GET請求返回的值不同於當前設置的值，則覆蓋該值。

我只是想知道更新狀態中的簡單字符串的最佳實踐是什么？

我的狀態構造函數：

this.state = {
  goldPrice: '',
  items: {}
}

我的API請求：

fetchGoldPrice() {
  jQuery.ajax({
    method: 'GET',
    headers: {'Access-Control-Allow-Origin': '*'},
    url: Constants.API_URL,
    success: (gold) => {
      this.updateGoldPrice(gold.gold_bid_usd_toz);
    }
  });
}

如果成功，則獲取將調用updateGoldPrice並傳遞返回的價格。

updateGoldPrice(goldPrice) {
  this.setState({ goldPrice: goldPrice });
}

然后我每30秒檢查一次價格：

componentDidMount() {
  this.fetchGoldPrice();
  this.timer = setInterval(
    () => this.fetchGoldPrice(), 30000);
}

我很好奇這是否是一種好的方法。 因為我閱讀的所有內容都表示要執行以下操作：

addItem(item) {
  const items = {...this.state.items};
  items[item] = item;
  this.setState({ items: items });
}

但是我沒有將所有價格存儲在一個數組中，我只想要一個最新價格。

謝謝。

Answer 1

那么，您指的最佳實踐是永不改變狀態！ 。
在您的情況下， string是原始類型（實際上是原始值），因此默認情況下它已經是不可變的，因此在此無需擔心。
您需要注意諸如Array ＆ Object引用類型。

基本類型（截至ES6 6種）：

Boolean
Null
Undefined
Number
String
Symbol (new in ECMAScript 6)

Answer 2

您正在正確執行此操作。 您的用戶界面僅顯示最新價格，因此您只需要在該州存儲即可。 如果您不顯示歷史價格，則無需存儲它們。

此外，在您的狀態下存儲基本類型this.setState({foo: "bar"})完全可以。

Answer 3

根據react文檔的推薦方法是使用react libray中的setState方法。 是通過“ setState（{MyStateToModify：“新值”}}）。希望對您有所幫助