在 React.js 上驗證電話號碼

Question

我正在嘗試驗證電話字段，以使用以下代碼獲取所有字母和點。

validatePhone = () => {
        const sanitizedPhone = this.state.phone.replace(/\D/g, '');
        if (sanitizedPhone.length >= 10 && sanitizedPhone.length <= 11) {
            this.setState({ phone: sanitizedPhone });
            return true;
        }
        toast.error('Invalid phoneNumber.', {
            position: "top-center",
            autoClose: false,
            closeOnClick: true,
        });
        return false;
    }

當我嘗試使用像11.97.4.4.51234這樣的輸入點的console.log(sanitizedPhone) ，我得到11974451234但在此之后，在console.log(this.state.phone)我得到舊號碼11.97.4.4.51234

Answer 1

從反應文檔：

setState() 並不總是立即更新組件。 它可能會批量更新或推遲更新。 這使得在調用 setState() 之后立即讀取 this.state 成為一個潛在的陷阱。

這就是為什么您在使用 setState 后沒有立即看到更改的原因。