Question

我有两个反应类，它们应该构建一个表来计算各种属性的总数。

在我的班级，我有：

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

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

因此，执行顺序是正确的。要获得您想要实现的目标，您可能需要考虑val#变量的存储位置，以及是否可以在主要组件中调用addToRowTotals方法，或者找出方法在调用此方法后重新呈现主组件。

React渲染不按顺序执行

1 个答案: