点击提交按钮后，我试图从localStorage获取数据但是在第一次点击我得到这个错误
(TypeError: Cannot read properties of null (reading 'insertRow'))
和在第二次点击我能够获取数据，但我得到的第一个值是未定义的． 谁能给我建议一个解决方案(问题是在Main.js)?
Login.js
import React, { useState } from 'react';
import { useHistory } from 'react-router';
import './Login.css';
const Login = () => {
const [name, setName] = useState('');
const [pwd, setPwd] = useState('');
const history = useHistory();
const onSubmit = () => {
if (name === pwd && name !== "" && pwd !== "") {
if (name in localStorage) {
localStorage.setItem('Login', name);
history.push(`transaction`);
}
else {
localStorage.setItem('Login', name);
localStorage.setItem(name, 0);
history.push(`transaction`);
}
}
else {
alert("Please Enter a valid User");
}
};
return (
<div>
<div className="login loginbox">
<fieldset>
<legend>Name</legend>
<input
placeholder="Enter your name..."
value={name} className="text"
onChange={(e) => setName(e.target.value)}
/>
</fieldset>
<br />
<fieldset>
<legend>Password</legend>
<input
type="password"
placeholder="Enter your password..."
value={pwd} className="text"
onChange={(e) => setPwd(e.target.value)}
/>
</fieldset>
<button className="Loginbtn" onClick={() => onSubmit()}>Login</button>
</div>
</div>
);
};
export default Login;
Main.js
import React, { useState } from 'react';
import { useHistory } from 'react-router';
import './Main.css';
const Main = () => {
let Arr = [];
let myArr = [];
let recent_transaction = [];
const [draw, setDraw] = useState('');
const [init, setInit] = useState('');
const [history, setHistory] = useState(false);
const [table_show_Deposit, setTable_show_Deposit] = useState(false);
const [table_show_WithDraw, setTable_show_WithDraw] = useState(false);
let obj = {};
const [collections_transaction_deposite, setCollections_transaction_deposite] = useState([obj]);
let object = {};
const [collections_transaction_withdraw, setCollections_transaction_withdraw] = useState([object]);
const redirect = useHistory();
const getter = localStorage.getItem('Login');
let tbl = '';
const table = <table border="1">
<thead>
<tr>
<th>Transaction Type</th>
<th>Balance Amount</th>
<th>Amount</th>
<th>Date & Time</th>
<th>Interest</th>
</tr>
</thead>
<tbody id="recenttrans">
{tbl}
</tbody>
</table>
const Deposite = () => {
const event = new Date().toLocaleString();
const setter = localStorage.getItem(getter)
const store = parseInt(setter) + parseInt(init);
localStorage.setItem(getter, store);
let interset_Amount = '';
if (store < 0) {
interset_Amount = store;
}
else {
interset_Amount = 0;
}
obj = {
"transaction_type": 'Deposite',
"Amount": document.getElementById('depinput').value,
"time": event,
"Balance": store,
"interest": interset_Amount
}
setCollections_transaction_deposite(collections_transaction_deposite => [obj, ...collections_transaction_deposite])
localStorage.setItem("transaction_Deposite", JSON.stringify(collections_transaction_deposite))
}
const Withdraw = () => {
const event = new Date().toLocaleString();
const getter = localStorage.getItem('Login')
const setter = localStorage.getItem(getter)
const store1 = parseInt(setter) - parseInt(draw);
localStorage.setItem(localStorage.getItem('Login'), draw)
localStorage.setItem(getter, store1);
let interset_Amount = '';
if (store1 < 0) {
interset_Amount = store1;
}
else {
interset_Amount = 0;
}
object = {
"transaction_type": 'WithDraw',
"Amount": document.getElementById('withinput').value,
"time": event,
"Balance": store1,
"interest": interset_Amount
}
setCollections_transaction_withdraw(collections_transaction_withdraw => [object, ...collections_transaction_withdraw])
localStorage.setItem("transaction_Withdraw", JSON.stringify(collections_transaction_withdraw))
}
const Deposite_show_table = () => {
setTable_show_Deposit(true);
setTable_show_WithDraw(false);
if (table !== "") {
const table = document.getElementById('deposite_table');
myArr = JSON.parse(localStorage.getItem('transaction_Deposite'));
console.log(myArr);
for (let i = 0; i < myArr.length; i++) {
const row = table.insertRow(i);
row.innerHTML = "<td>" + myArr[i].transaction_type + "</td>" + "<td>" + myArr[i].Amount + "</td>" + "<td>" + myArr[i].time + "</td>" + "<td>" + myArr[i].Balance + "</td>" + "<td>" + myArr[i].interest + "</td>"
}
}
else {
console.log("Empty");
}
}
const WithDraw_show_table = () => {
setTable_show_WithDraw(true);
setTable_show_Deposit(false);
if (table !== "") {
const table = document.getElementById('withdrawal_table');
Arr = JSON.parse(localStorage.getItem('transaction_Withdraw'));
console.log(Arr);
for (let i = 0; i < Arr.length; i++) {
const row = table.insertRow(i);
row.innerHTML = "<td>" + Arr[i].transaction_type + "</td>" + "<td>" + Arr[i].Amount + "</td>" + "<td>" + Arr[i].time + "</td>" + "<td>" + Arr[i].Balance + "</td>" + "<td>" + Arr[i].interest + "</td>"
}
}
else {
console.log("Empty");
}
}
const RecentTrans = () => {
debugger;
setHistory(true);
const deposit = [JSON.parse(localStorage.getItem('transaction_Deposite'))];
const withdraw = [JSON.parse(localStorage.getItem('transaction_Withdraw'))];
console.log(deposit);
console.log(withdraw);
if (table !== "") {
const table = document.getElementById('recenttrans');
recent_transaction = deposit[0].concat(withdraw[0]);
console.log(recent_transaction);
for (let i = 0; i < recent_transaction.length; i++) {
const row = table.insertRow(i);
row.innerHTML = "<td>" + recent_transaction[i].transaction_type + "</td>" + "<td>" + recent_transaction[i].Amount + "</td>" + "<td>" + recent_transaction[i].time + "</td>" + "<td>" + recent_transaction[i].Balance + "</td>" + "<td>" + recent_transaction[i].interest + "</td>"
}
}
else {
console.log("Empty");
}
}
const Signout = () => {
redirect.push(`/`);
}
return (
<div className="box">
<div className="depmain">
<fieldset className="fieldset">
<legend>Deposite</legend>
<input
type="number"
id="depinput" className="text"
placeholder="Enter your money..."
onChange={(e) => setInit(e.target.value)}
/>
</fieldset>
</div>
<button className="depbtn" onClick={() => Deposite()}>Deposit</button>
<br />
<div className="withmain">
<fieldset className="fieldset">
<legend>WithDraw</legend>
<input
type="number"
id="withinput" className="text"
placeholder="Enter your money..."
onChange={(e) => setDraw(e.target.value)}
/>
</fieldset>
</div>
<button className="depo" onClick={() => Deposite_show_table()}>Deposite</button>
<button className="with" onClick={() => WithDraw_show_table()}>Withdarwal</button>
<button className="withbtn" onClick={() => Withdraw()}>WithDraw</button>
{table_show_Deposit ? <div className="tab">
<table border="1">
<thead>
<tr>
<th>Transaction Type</th>
<th>Amount</th>
<th>Date & Time</th>
<th>Balance Amount</th>
<th>Interest</th>
</tr>
</thead>
<tbody id="deposite_table">
</tbody>
</table>
</div> : ""}
{table_show_WithDraw ? <div className="tab">
<table border="1">
<thead>
<tr>
<th>Transaction Type</th>
<th>Amount</th>
<th>Date & Time</th>
<th>Balance Amount</th>
<th>Interest</th>
</tr>
</thead>
<tbody id="withdrawal_table">
</tbody>
</table>
</div> : ""}
<div>
<button className="recentbtn" onClick={() => RecentTrans()}>Recent Transaction</button>
{history ?
<div className="tbl">{table}</div>
: console.log("Hello")}
</div>
<div>
<button className="signbtn" onClick={() => Signout()}>Sign Out</button>
</div>
</div>
)
}
export default Main;
myArr = JSON.parse(localStorage.getItem(' transaction_depository '));
在从localStorage解析项之前检查是否有设置项。
if(localStorage.getItem('transaction_Deposite'))
myArr = JSON.parse(localStorage.getItem('transaction_Deposite'));