リアクションレンダリングが順番に実行されない

Question

私は様々なプロパティの合計を計算するテーブルを作成することになっている2つの反応クラスを持っています。

const TableComponent = React.createClass({ 

    resetRowTotals: function() { 
     console.log("Resetting"); 
     this.total1 = 0; 
     this.total2 = 0; 
     this.total3 = 0; 
     this.total4 = new Set(); 
    }, 

    addToRowTotals: function(total1, total2, total3, total4) { 
     console.log("Updating"); 
     this.total1 += ...; 
     this.total2 += ...; 
     this.total3 += ...; 
     this.total4.add(...); 
    }, 

    render: function() { 
     this.resetRowTotals(); 

     this.tableRows = this.props.items.map(item => React.createElement(TableRow, {..., addToRowTotals: this.addToRowTotals})); 

     console.log(this.total1, this.total2, this.total3, this.total4); 

     return React.createElement("table", {id: "..."}, 
      React.createElement("thead", {}, 
       React.createElement("tr", {}, 
        React.createElement("th", {}, ...), 
        React.createElement("th", {}, ...), 
        React.createElement("th", {}, ...), 
        React.createElement("th", {}, ...), 
        React.createElement("th", {}, ...) 
       ) 
      ), 
      React.createElement("tbody", {}, 
       React.createElement("tr", {}, 
        React.createElement("td", {}, ...), 
        React.createElement("td", {}, ...), 
        React.createElement("td", {}, ...), 
        React.createElement("td", {}, ...), 
        React.createElement("td", {}, ...) 
       ), 
       this.tableRows 
      ) 
     ) 
    } 
}); 

をそして、私の行の構成要素のために私が持っている：私のメインクラスで

は、私が持っている

const TableRow = React.createClass({ 

    getVal2: function() {...}, 

    getVal3: function() {...}, 

    getVal4: function() {...}, 

    render: function() { 
     let val1 = this.props....; 
     let val2 = this.getVal2(); 
     let val3 = this.getVal3(); 
     let val4 = this.getVal4(); 

     this.props.addToRowTotals(val1, val2, val3, val4); 

     return React.createElement("tr", {}, 
      React.createElement("td", {}, this.props....), 
      React.createElement("td", {}, val1), 
      React.createElement("td", {}, val2), 
      React.createElement("td", {}, val3), 
      React.createElement("td", {}, val4) 
     ) 
    } 
}); 

しかし、私が取得する表を見てみるとき、すべてのテーブルの行は問題ありませんが、テーブルの最上部にある行全体がすべて0を表示しています

私の機能の実行順序を見るためにコンソールを見ると、表示されます：

Resetting 
0 0 0 Set(0) {} 
Updating 

私は何を期待：

Resetting 
Updating 
(total1's value) (total2's value) (total3's value) Set(x) {(total4 values)} 

コードが順番に実行なっていることは表示されません。

合計がリセットされ、次にaddToRowTotals関数を呼び出すメイン行が作成され、次にデータが合計に対して正しいことを確認するために、合計4つの合計値が記録されます。

テーブルローを作成する前にコンソールが合計値を記録しているのはなぜですか？

Answer 1

コードは実際に指定した順序で呼び出されています。 TableRowコンポーネントのレンダリングメソッドでaddToRowTotalsメソッドを呼び出すのは、メインコンポーネントのrenderメソッドの最後にthis.tableRowsが呼び出されるまで呼び出されません。つまり、itemsのメインコンポーネントの小道具の配列をマッピングする呼び出しは、TableRowsのレンダリングメソッドを実際に呼び出すことはありません。マッピングされたコンポーネントをレンダリングしようとする試みのみが行われます。

したがって、実行順序は正しいです。あなたが達成しようとしているものを得るためには、val#の変数がどこに格納されているのか、そしてメインコンポーネントのaddToRowTotalsメソッドを呼び出すことができるかどうか、あるいは後でメインコンポーネントを再レンダリングする方法このメソッドが呼び出されます。