我有 localStorage 上面有多個專案。我想檢索所有這些并將其顯示在<ListItem>Material UI 上。
這是我當前的代碼：
function saveJob(key, value) {
localStorage.setItem(key, value);
}
函式 saveJob 基本上只是將值與唯一鍵一起保存。localStorage 的內容是這樣的：
| 鑰匙 | 價值 |
|---|---|
| 1 | 技術員 |
| 2 | 水管工 |
我如何取回物品：
var savedJobs = [];
useEffect(() => {
var keys = Object.keys(localStorage),
i = keys.length;
while (i--) {
savedJobs.push(localStorage.getItem(keys[i]));
}
return savedJobs;
}, [])
現在解決這個問題，我嘗試通過<ListItem>Material UI 在功能組件中顯示它，如下所示：
<List>
{savedJobs.map((job) => (
<ListItem key={job.Key} disablePadding>
<ListItemButton>
<ListItemText primary={job.Value} />
</ListItemButton>
</ListItem>
))}
</List>
這是行不通的。誰能指出我正確的方向？
uj5u.com熱心網友回復：
當函陣列件中的區域變數發生更改時，React 不會觸發重新渲染。它將在以下情況下重新渲染：狀態已更改、道具已更改或父組件已重新渲染。
你應該把你savedJobs的陳述寫下來
const [savedJobs, setSavedJobs] = useState([]);
代替
var savedJobs = [];
uj5u.com熱心網友回復：
您需要狀態來存盤從本地存盤中檢索到的資料。而不是你的savedJobsvar 在你的之外，useEffect在鉤子內創建一個陣列，然后用這個資料更新你的狀態。這是一個例子：
// Initiate your state as an empty array.
const [savedJobs, setSavedJobs] = useState([]);
// Used as an example instead of localstorage.
const example = ["foo", "bar"];
useEffect(() => {
let jobs = [];
let keys = Object.keys(example),
i = keys.length;
while (i--) {
jobs.push(example[i]);
}
setSavedJobs(jobs);
}, [example]);
return <>{savedJobs.map((job) => job)}</>;
或查看這個互動式示例。
uj5u.com熱心網友回復：
首先，我將檢查您的 savedJobs 陣列中的內容。看起來 savedJobs 看起來像這樣：
savedJobs = ['技術員', '水管工'];
另一方面，您正在映射并獲取如下值：{job.Key} & {job.Value}
嘗試：
<List>
{savedJobs.map((job, i) => (
<ListItem key={i} disablePadding>
<ListItemButton>
<ListItemText primary={job} />
</ListItemButton>
</ListItem>
))}
</List>
ps：你不應該i用作鍵，但我讓你弄清楚你想要在那里的價值。
如果你想使用 {job.key} 和 {job.value}，你需要push一個像這樣的物件：
savedJobs.push({key: i, value: localStorage.getItem(keys[i])});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/430293.html
標籤：javascript 反应 列表 材料-ui 本地存储
上一篇：為什么主串列排序-Flutter
下一篇：如何將串列資料插入SQLite？