条件渲染不工作在我的代码

Question

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

{[phone] === user.phoneNumber ? "Verified" :" Not Verified"}

但是这个方法不起作用。我正在使用react与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==="[phone]" ? "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

const [verified,setVerified]=useState("")
useEffect(() => {
let unsubscribe;
if (user.phoneNumber==="[phone]") {
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>

Answer 2

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