<BR/>如果值為真，我正在嘗試顯示組件，否則顯示<Nothing/>組件。但由于某種原因，盡管value是錯誤的，但<BR/>它正在顯示。
PC.js 代碼
import React,{useContext, useState} from 'react'
import { BRcontext } from "../App";
import './Profile.css';
import { useNavigate } from "react-router-dom"
export default function Profile() {
const [value, setValue] = useState(false);
localStorage.setItem("Value", value);
console.log(value);
const navigate = useNavigate();
return (
<div>
<div className='container mt-5'>
<div className='row'>
<div>
<h3 className='mt-5'>Send Request</h3>
<button className='btn btn-success mt-3 ps-3 pe-3' onClick={() => {setValue(true)}}>Request</button>
</div>
</div>
</div>
</div>
)
}
BR1.js 代碼
import React, { useContext } from "react";
import BR from "./BR";
import Nothing from './Nothing'
export default function BR1() {
const val = localStorage.getItem('Value');
return (
<div>
{console.log(val)}
{val ? <BR/> : <Nothing/>}
</div>
);
}
BR.js
import React from 'react'
import './Profile.css';
export default function BR() {
let values = false;
return (
<div>
<div className='container mt-5'>
<div className='row'>
<div>
<h3 fontSize="150px">Do you want to be a ....?</h3>
<button type="button" className="btn btn-success ml-5 mt-3 mr-1">YES</button>
<button type="button" className="btn btn-danger ms-5 mt-3 mr-1" onClick={() => {localStorage.removeItem('Value')}}>NO</button>
</div>
</div>
</div>
</div>
)
}
中的值localStorage正在正確更新并且val也在更新但是<BR/>當我想要<Nothing/>組件時value仍然顯示組件false
uj5u.com熱心網友回復：
當你這樣做localStorage.setItem("Value", value);時，它將注冊value為一個字串。然后當你打電話時const val = localStorage.getItem('Value');，val就等于"false"。并且"false"是true，因為它是一個非空字串。
為此，您應該JSON.parse()在從獲取值localStorage和JSON.stringify()保存時使用。如下所示：
請注意，我評論了您的行，因此您可以看到我在哪里進行了更改。
// localStorage.setItem("Value", value);
localStorage.setItem("Value", JSON.stringify(value));
// const val = localStorage.getItem('Value');
const val = JSON.parse(localStorage.getItem('Value'));
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493286.html
標籤：javascript 反应 反应钩子 反应路由器 本地存储
下一篇：將函式結果顯示到html