【React】在函数中state属性改变之后如何马上对其他函数可见？

Question

其实最主要的疑惑在于，一个函数更新了state的属性，另一个函数如何获取最新的state中的属性值。按照资料说是，用函数式setState传递，可是依然不生效。

页面视图如下：

功能需求描述：融资本金变化，首付款也跟着变化；首付款变化，融资本金也发生变化；两者之和为定值--租赁物总价。

遇到问题描述：在融资本金输入框和首付款输入框，均有一个OnChange函数，现在出现了互相调用导致Maximum call stack size exceeded的问题；

原本思路：通过singleChange()方法来改变state中的signal，可是发现，在函数loanSumOnChange()调用singleChange(),以及函数downPaymentOnChange()调用singleChange()时，signal是不一样的，思绪被卡住了。

代码片段：融资本金变化

// 融资本金发生变化时，触发事件：
    loanSumOnChange = (value) => {
        if (this.singleChange()) {
            if (value < 0) {
                this.voInfo.setValue("loanSum", 0);
                Notify.error('融资本金不能小于0！');
            }
            let financingSum = this.voInfo.getValue("financingSum");
            this.voInfo.setValue("downPayment", financingSum - value);
            if (value == 0) {
                this.voInfo.setValue("dowmPaymentRatio", 0.0);
            } else {
                // 首付款比例
                this.voInfo.setValue("dowmPaymentRatio", (financingSum - value) / value);
            }
        }
    }

代码片段：首付款发生变化

// 首付款发生变化时，触发事件：
    downPaymentOnChange = (value) => {
        if (this.singleChange()) {
            if (value < 0) {
                this.voInfo.setValue("downPayment", 0);
                Notify.error('首付款不能小于0！');
            }
            let financingSum = this.voInfo.getValue("financingSum");
            this.voInfo.setValue("loanSum", financingSum - value);
            if (value == 0) {
                this.voInfo.setValue("dowmPaymentRatio", 0.0);
            } else {
                // 首付款比例
                this.voInfo.setValue("dowmPaymentRatio", value / (financingSum - value));
            }
        }
    }

信号量变化：

singleChange = () => {
        debugger
        let signal = this.state.signal;
        if (signal == 2) {
            this.setState((state) => ({signal: 0}))
            return false;
        } else {
            this.setState((state) => ({signal: state.signal + 1}))
            return true;
        }
    }

Answer 1

这跟 setState 更新机制有关系，这里的 state 更新是非同步的，所有拿不到最新的值。

思路不变的情况下，考虑把 signal 该作为当前类的内部属性来维护即可：

class Xx extends Component {
  signal = 0

  singleChange = () => {
        if (this.signal == 2) {
            this.signal = 0
            return false;
        } else {
            this.signal++;
            return true;
        }
    }
}

或者把 siganl 维护在当前模块内即可，跟react 组件的更新不产生联系。