反应渲染不按顺序执行

我有两个反应类应该建立一个表，它计算各种属性的总计。反应渲染不按顺序执行

在我的主类，我有：

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个总值。

为什么在我创建表格行之前，控制台正在记录总值？

来源

2017-08-31 S0rn

代码实际上是按照您指定的顺序调用的。您只调用TableRow组件的渲染方法中的addToRowTotals方法，直到在主组件的渲染方法结束时调用this.tableRows才会调用该方法。换句话说，调用映射主组件的道具的items阵列实际上不会调用TableRows的渲染方法;只有尝试渲染映射的组件。

因此，执行顺序是正确的。为了得到你想要实现的内容，你可能想要考虑变量存储的位置，以及你是否可以在主要组件中调用addToRowTotals方法，或者想出一种方法来重新渲染主要组件这个方法被调用。

来源

2017-08-31 04:41:00 iceman

实际上，这听起来对我来说听起来不对 - 你可以先尝试简单地将'addToRowTotals'绑定到主要元素吗？基本上，你传递给'TableRow'组件的元素（在map调用中）应该看起来像这样：'{...，addToRowTotals：this.addToRowTotals.bind（this）}' – iceman

另外，我认为这是使用组件状态会更有意义 – iceman

绑定addToRowTotals似乎不会以任何可感知的方式影响功能。我认为你对于存储val＃变量的位置是非常正确的。这只是一个耻辱，因为我希望组件彼此独立（但让孩子仍然可以用新数据调用特定的父功能）。在我这样做之前，我尝试使用componentWillUpdate（nextProps，nextState）来计算值并在渲染发生之前将它们传递给父项，但这只会使代码更加不可靠和不可用。 – S0rn

反应渲染不按顺序执行

回答

相关问题