在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;
    }

当我尝试在console.log(sanitizedPhone)之类的输入中用点输入11.97.4.4.51234时，我得到11974451234，但此后，在console.log(this.state.phone)上，我得到了较旧的数字11.97.4.4.51234

Answer 1

来自react docs：

  

setState（）并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。

这就是为什么在使用setState之后看不到更改的原因。