javascript - 具有 prevState 比较的 componentDidUpdate 正在处理备用触发器

Question

我有一个主要组件，它使用一些 Prop 调用另一个组件。

// Main Component

<AnotherComponent
    className="EnterNumber-input"
    submitClicked={this.state.submitClicked}
/>

单击按钮时，我正在更改状态 (this.state.submitClicked)。

<button 
    onClick={async () => {
         await this.setState({submitClicked : !this.state.submitClicked}); 
    }}
>
         Toggle SubmitClicked
</button>

在另一个组件中，我正在比较 prevState与 this.props显示警报。

componentDidUpdate = (prevProps) => {
        if (this.props.submitClicked && this.props.submitClicked !== prevProps.submitClicked) {
            alert('This alert is being called on alternate changes');
        }
      };

问题 - 此警报在备用按钮点击时可见。
需求 - 每次单击按钮时都会出现警报。

Answer 1

违规行是:
“如果(this.props.submitClicked && this.props.submitClicked !== prevProps.submitClicked){”
由于 this.props.submitClicked 是 bool 值，因此每隔一次点击，即 submitClicked 状态为 false 时，显示警报所需的条件之一为 false，因此不会触发警报。由于 this.props.submitClicked 是一个 bool 值，即使定义了值，如果值为 false，则 this.props.submitClicked 的计算结果为 false。
编辑:
如果您正在检查是否定义了 this.props.submitClicked，请使用:
typeof this.props.submitClicked !== 'undefined'