条件渲染在我的代码中不起作用

Question

我正在尝试验证手机号码。 如果用户手机号码与手机号码匹配，我将使用手机号码形式用户，则表示已验证，否则未验证

{+91821024343 === user.phoneNumber ? "Verified" :" Not Verified"}

但这种方法行不通。 我正在使用与 firebase 的反应。 firebase 使用的身份验证

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.0/react-dom.min.js"></script>


const Login = () => {
    // Inputs
    const [mynumber, setnumber] = useState("");
    const [otp, setotp] = useState('');
    const [show, setshow] = useState(false);
    const [final, setfinal] = useState('');

    // Sent OTP
    const signin = () => {

        if (mynumber === "" || mynumber.length < 10) return;

        let verify = new firebase.auth.RecaptchaVerifier('recaptcha-container');
        auth.signInWithPhoneNumber(mynumber, verify).then((result) => {
            setfinal(result);
            alert("code sent")
            setshow(true);
        })
            .catch((err) => {
                alert(err);
                window.location.reload()
            });
    }

    // Validate OTP
    const ValidateOtp = () => {
        if (otp === null || final === null)
            return;
        final.confirm(otp).then((result) => {
            // success
        }).catch((err) => {
            alert("Wrong code");
        })
    }
    const [user] = useAuthState(auth);

    
    return (
        
        <div style={{ "marginTop": "200px" }}>
            <center>
                <div style={{ display: !show ? "block" : "none" }}>
                    <input value={mynumber} onChange={(e) => {
                    setnumber(e.target.value) }}
                        placeholder="phone number" />
                    <br /><br />
                    <div id="recaptcha-container"></div>
                    <button onClick={signin}>Send OTP</button>
                </div>

                {user.phoneNumber==="+91821024343" ? "Varified" :" Not Varified"}
                
            
                {user ? "Varified" :" Not Varified"}
            
                {user.phoneNumber}
                <div style={{ display: show ? "block" : "none" }}>
                    <input type="text" placeholder={"Enter your OTP"}
                        onChange={(e) => { setotp(e.target.value) }}></input>
                    <br /><br />
                    <button onClick={ValidateOtp}>Verify</button>
                </div>
            </center>
        </div>
    );
}
export default Login;

这些语句在这里起作用。

{user ? "Varified" :" Not Varified"}
{user.phoneNumber}

我在这里添加了整页片段

Answer 1

问题中没有足够的细节，但我猜原因可能在+91821024343 === user.phoneNumber部分，如果电话号码是 +91821024343。 在 JavaScript 中，+91821024343 是 91821024343，一个数字。 “+”号不被视为数字的一部分。 “+”将字符串转换为数字。 尝试使用"+91821024343"作为字符串。

Answer 2

const [verified,setVerified]=useState("")
useEffect(() => {
let unsubscribe;

if (user.phoneNumber==="+91821024343") {
 setVerified("verified")
  
} else {
setVerified("not verified")
}

return unsubscribe;
}, [user]);


<div style={{ "marginTop": "200px" }}>
        <center>
            <div style={{ display: !show ? "block" : "none" }}>
                <input value={mynumber} onChange={(e) => {
                setnumber(e.target.value) }}
                    placeholder="phone number" />
                <br /><br />
                <div id="recaptcha-container"></div>
                <button onClick={signin}>Send OTP</button>
            </div>

            {verified}
            
        
            {user ? "Varified" :" Not Varified"}
        
            {user.phoneNumber}
            <div style={{ display: show ? "block" : "none" }}>
                <input type="text" placeholder={"Enter your OTP"}
                    onChange={(e) => { setotp(e.target.value) }}></input>
                <br /><br />
                <button onClick={ValidateOtp}>Verify</button>
            </div>
        </center>
    </div>