function 返回与我预期相反的 boolean 值

Question

我的.tsx文件中有这个 function：

doIsChecked() {
    var isItChecked = document.getElementById('isPless') as HTMLInputElement;

    console.log('updateDocsFlag before: ' + this.state.updateDocsFlag);
    if (isItChecked.checked) {
        this.setState({ updateDocsFlag: true });
    } else {
        this.setState({ updateDocsFlag: false });
    }
    console.log('updateDocsFlag after: ' + this.state.updateDocsFlag);
}

当复选框被勾选/未插入复选框时，它会被调用。 我注意到如果isItChecked为 true updateDocsFlag为 false，可以在日志条目之前和之后看到。 这不是我预期的行为我的代码有问题吗？

Answer 1

this.setState是异步的。 它确实设置了正确的 state，但不是在通话时。 所以当你打电话时

    console.log('updateDocsFlag after: ' + this.state.updateDocsFlag);

您仍然可以看到旧的 state。 尝试执行以下操作：

doIsChecked() {
    var isItChecked = document.getElementById('isPless') as HTMLInputElement;

    console.log('updateDocsFlag before: ' + this.state.updateDocsFlag);
    let updateDocsFlag = isItChecked.checked;
    this.setState({ updateDocsFlag });
    console.log('updateDocsFlag after: ' + updateDocsFlag);
}

这样，您记录的不是 state，而是您传递给 state 的值。 你想在那里看到正确的价值。 （在所有活动功能跟踪结束后，实际的 state 将使用此值更新）