Состояние не устанавливается в responseJS после изменения входного индекса. Состояние обновления только временное?

Question

У меня есть HOC под названием "Выручка". В том, чье нет, есть компонент таблицы с именем "RowValueCalculations". строк в соответствии с входом с именем "teamSize".

export default class RevenueRealisation extends React.Component {

    state = {
        TABLE: [],
        rowObj: {
            salary: null,
            EmployeeTypeNLocation: 2,
            ExpectedOpsMargin: '',
            ExpectedRevenue: '',
            ActualRevenue: '',
            ActualOpsMargin: '',
            gna: '',
            expectedGrossMargin: '',
            actualGrossMargin: ''
        },
        selectable: false,
        teamSize: null,
        revenue: null,
        team: [],
    }

    getInputValue = (event, param) => {
        if (param === "teamSize") {
            this.setState({ teamSize: event.target.value })
        } else this.setState({ revenue: event.target.value })
    }

    makeTable() {
        let row = [];
        for (let i = 0; i < this.state.teamSize; i++) {
            row.push(
                <RowValueCalculations
                    i={i}
                    teamSize={Number(this.state.teamSize)}
                />
            )
        }
        return row;
    }

    render() {
        return ([
            <Table selectable={this.state.selectable}>
                <TableBody displayRowCheckbox={false}>
                    <TableRow>
                        <TableRowColumn>Enter Revenue Annual</TableRowColumn>
                        <TableRowColumn>
                            <input type="text" value={this.state.revenue} onChange={(e) => this.getInputValue(e, "revenue")} /* onKeyPress={(e) => { return this.isNumberKey(e, "rate") }} */ />
                        </TableRowColumn>
                    </TableRow>
                    <TableRow>
                        <TableRowColumn>Enter Team Size</TableRowColumn>
                        <TableRowColumn>
                            <input type="text" value={this.state.teamSize} onChange={(e) => this.getInputValue(e, "teamSize")} /* onKeyPress={(e) => { return this.isNumberKey(e, "rate") }} */ />
                        </TableRowColumn>
                    </TableRow>
                </TableBody>
            </Table>,
            <Table selectable={this.state.selectable}>
                <TableHeader displaySelectAll={false}>
                    <TableRow>
                        <TableHeaderColumn></TableHeaderColumn>
                        <TableHeaderColumn>Annual</TableHeaderColumn>
                        <TableHeaderColumn>Enter Location</TableHeaderColumn>
                        <TableHeaderColumn>Expected Ops Margin</TableHeaderColumn>
                        <TableHeaderColumn>Expected Revenue</TableHeaderColumn>
                        <TableHeaderColumn>Actual Revenue</TableHeaderColumn>
                        <TableHeaderColumn>Actual Ops Margin</TableHeaderColumn>
                        <TableHeaderColumn>G&A</TableHeaderColumn>
                        <TableHeaderColumn>Expected Gross Margin</TableHeaderColumn>
                        <TableHeaderColumn>Actual Gross Margin</TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {this.makeTable()}
                </TableBody>
            </Table>
        ]);
    }
}

После ввода значения "Размер команды" отображается компонент RowValueCalculations. Я должен ввести входы в зарплату сейчас.

export default class RowValueCalculations extends Component {
    constructor(props) {
        super(props);
        this.state = {
            TABLE: [],
            rowObj: {
                salary: null,
                EmployeeTypeNLocation: 2,
                ExpectedOpsMargin: '',
                ExpectedRevenue: '',
                ActualRevenue: '',
                ActualOpsMargin: '',
                gna: '',
                expectedGrossMargin: '',
                actualGrossMargin: ''
            },
            salary: null,
            EmployeeTypeNLocation: 1
        }
        console.log("in constructor...");
        for (let i = 0; i < this.props.teamSize; i++) {
            this.state.TABLE.push(this.state.rowObj);
        }
    }

    componentDidUpdate() {
        console.log("this.state.TABLE after update: ", this.state.TABLE);
    }

    componentWillUpdate() {
        console.log("this.state.TABLE before update: ", this.state.TABLE);
    }

    shouldComponentUpdate(nextProps) {
        if (this.props.i !== nextProps.i) {
            return false;
        } return true;
    }

    setSalaryRowWise(e, i) {
        console.log("this.state.TABLE on input: ", this.state.TABLE);
        let arrayShallowCopy = this.state.TABLE.slice();
        let array = arrayShallowCopy.map((a, index) => {
            var returnValue = { ...a };
            if (index == i) {
                returnValue.salary = e.target.value;
            }
            return returnValue;
        })
        this.setState({ TABLE: array });
    }

    calculateRowObjValues(i, table) {
        let gna;
        if (this.state.TABLE[i].EmployeeTypeNLocation === 1) {
            gna = Constants.AproxGNANonEmpOfc;
        }
        else if (this.state.TABLE[i].EmployeeTypeNLocation === 2) {
            gna = Constants.AproxGNAEmp;
        }
        else {
            gna = Constants.AproxGNANonEmpCust;
        }
        table.ExpectedRevenue = (this.state.TABLE[i].salary + gna) / (1 - 25.74);
        return table;
    }

    triggerCalculations(i) {
        let table = {
            salary: this.state.TABLE[i].salary,
            EmployeeTypeNLocation: this.state.TABLE[i].EmployeeTypeNLocation,
            ExpectedOpsMargin: '',
            ExpectedRevenue: '',
            ActualRevenue: '',
            ActualOpsMargin: '',
            gna: '',
            expectedGrossMargin: '',
            actualGrossMargin: ''
        }
        let returnedRowObject = this.calculateRowObjValues(i, table);
        this.state.TABLE[i] = returnedRowObject;
        console.log(this.state.TABLE);
    }

    render() {
        return (
            <TableRow key={this.props.i}>
                <TableRowColumn>
                    <RaisedButton label="Calculate" primary={true} backgroundColor='#6C1D5F' onClick={() => this.triggerCalculations(this.props.i)} />
                </TableRowColumn>
                <TableRowColumn>Enter Salary {this.props.i + 1}</TableRowColumn>
                <TableRowColumn>
                    <input type="text" value={this.state.TABLE[this.props.i].salary} onChange={(e) => this.setSalaryRowWise(e, this.props.i)} />
                </TableRowColumn>
                <TableRowColumn>
                    <SelectField
                        onChange={(e, i, value) => this.handleChange(e, i, value)}
                        style={styles.customWidth}
                        value={this.state.TABLE[this.props.i].EmployeeTypeNLocation}
                    >
                        <MenuItem value={1} primaryText="Non Employee and Office" />
                        <MenuItem value={2} primaryText="Employee" />
                        <MenuItem value={3} primaryText="Non Employee and Customer" />
                    </SelectField>
                </TableRowColumn>
                <TableRowColumn>{this.state.ExpectedOpsMargin}</TableRowColumn>
                <TableRowColumn>{}</TableRowColumn>
                <TableRowColumn>{}</TableRowColumn>
                <TableRowColumn>{this.state.actualOps}</TableRowColumn>
                <TableRowColumn>{}</TableRowColumn>
                <TableRowColumn>{this.state.ExpectedGrossMargin}</TableRowColumn>
                <TableRowColumn>{this.state.ActualGrossMargin}</TableRowColumn>
            </TableRow>
        )
    }
}

После ввода зарплаты в любой из входов метод setSalaryRowWise вызывается обработчиком события onChange, а состояние TABLE обновляется (проверка console.log). Я также проверил в componentDidUpdate, что состояние TABLE обновляется. Но когда я нажимаю на какое-то другое входное значение, все состояние снова возвращается к исходному. Я не знаю, почему это происходит. Установка состояния однажды должна установить это навсегда, пока не изменится, я думаю. Может кто-нибудь помочь мне здесь?