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 將使用此值更新）