正確處理多個順序狀態更新

Question

這個例子有些勉強，但忍耐着我。說我有兩個函數作爲成員的陣營組成：

var OrderApp = React.createClass({ 
    getInitialState: function() { 
     return { 
      selectedOrders: {}, 
      selectedLineItems: {} 
     }; 
    }, 

    setOrderSelected: function(order, newSelectedState) { 
     var mutation = {}; 
     mutation[order.id] = {$set: newSelectedState}; 
     var newSelectedOrders = React.addons(this.state.selectedOrders, mutation); 
     _.each(order.lineItems, function(lineItem) { 
      setLineItemSelected(lineItem, newSelectedState); 
     }); 
     this.setState({selectedOrders: newSelectedOrders}); 
    }, 

    setLineItemSelected: function(lineItem, newSelectedState) { 
     var mutation = {}; 
     mutation[lineItem.id] = {$set: newSelectedState}; 
     var newSelectedLineItems = React.addons(this.state.selectedLineItems, mutation); 
     this.setState({seelctedLineItems: newSelectedLineItems}); 
    } 
}); 

在調用OrderApp.setOrderSelected（訂單，真）完成，只有最後LINEITEM選擇的狀態出現在我的組件的狀態已經改變。我猜這是因爲REACT爲配料對setState的電話，所以當我打電話：

var newSelectedLineItems = React.addons(this.state.selectedLineItems, mutation); 

在第二功能

，我每次拿起原來的狀態，所以只有最後一次突變生效。

我應該收集父函數中的所有狀態突變，並且只調用一次setState？這對我來說有點笨拙，我想知道我是否錯過了一個更簡單的解決方案。

Answer 1

在給定的組件執行線程中，不應多次調用this.setState。

所以，你有兩個選擇：

使用forceUpdate代替的setState

你沒有使用this.setState - 你可以直接修改狀態，並使用this.forceUpdate大功告成後。

這裏要記住的主要問題是，您應該儘快將this.state視爲受污染，只要您開始直接修改它即可。 IE：不要使用狀態，或者在調用this.forceUpdate之後才知道您已修改的屬性。這通常不是問題。

我絕對喜歡這種方法，當你在處理this.state內的嵌套對象。就個人而言，我不是React.addons.update的巨大粉絲，因爲我覺得這個語法非常笨重。我更願意直接修改和forceUpdate。

創建您繞過，直到最後在的setState

使用它的對象收集的所有更改的對象，傳遞給this.setState在你執行的線程結束。

Answer 2

不幸的是，這是淺層合併的問題。您必須收集更新並一次應用更新。

感覺有點笨重給我

這是你應該使用一個mixin一個真正的好兆頭！這段代碼看起來非常糟糕，但是當你使用它時，你可以假裝它看起來很漂亮。

var React = require('react/addons'); 
var UpdatesMixin = { 
    componentDidMount: function(){ 
     this.__updates_list = []; 
    }, 
    addUpdate: function(update){ 
     this.__updates_list.push(update); 
     if (this.__updates_list.length === 1) { 
     process.nextTick(function(){ 
      if (!this.isMounted()) { 
      this.__updates_list = null; 
      return; 
      } 

      var state = this.__updates_list.reduce(function(state, update){ 
      return React.addons.update(state, update); 
      }, this.state); 

      this.setState(state); 
      this.__updates_list = [];  
     }.bind(this)); 
     } 
    } 
}; 

requirebin

，它緩存是同步發生的所有更新，並將其應用於this.state，然後做了的setState。

用法如下所示（請參閱requirebin以獲取完整演示）。

this.addUpdate({a: {b: {$set: 'foo'}}; 
this.addUpdate({a: {c: {$set: 'bar'}}; 

有一些地方它可以（通過合併更新的對象，例如）進行優化，但你以後也可以做到不改變你的組件。