這解釋起來有點復雜。我正在嘗試制作一個切換功能，該功能可以使用 useContext 在不同頁面上添加和洗掉專案。一切都很好地添加和洗掉，直到我切換到另一個頁面，這就是錯誤開始的地方。一旦我這樣做了，該函式就會忽略陣列中的內容，并將復制陣列中的專案。奇怪的是，如果我 console.log 或使用當前陣列項手動檢查新專案，它會向我顯示所有內容。例如，為了將新專案添加到陣列中，它會檢查新專案的索引是否為 -1。如果是，它將添加該專案，如果不是，它將洗掉該專案。但是，一旦我離開頁面，它就再也看不到該專案并添加它。如果我 console.log 專案名稱和新專案名稱，我可以同時看到，
我沙箱中的代碼目錄是 src/Helpers/MyPicsContext。這是我的沙盒代碼和框的鏈接
網站上的選項卡是 Picks 和搜索頁面，您可以在添加任何專案之前在 Picks 上訪問或通過單擊頁面右上角的放大鏡訪問。
這是背景關系頁面的實際代碼。
export const MyPicksContextProvider = props => {
const [picksList, setPicksList] = useState(
JSON.parse(localStorage.getItem('picksList'))
||
[]
)
//console.log(picksList)
useEffect(() => {
localStorage.setItem("picksList", JSON.stringify(picksList));
}, [picksList]);
const deleteCoin = coin => {
if (picksList.length === 1) {
setPicksList([]);
} else {
setPicksList(picksList.filter(list => {
console.log(list)
//console.log(coin)
return list !== coin;
}))
}
console.log('deleted');
console.log(picksList)
}
const toggleCoin = (coin) => {
if (picksList.length === 0) {
setPicksList([...picksList, coin]);
} else {
if (picksList.indexOf(coin) === -1 ) {
setPicksList([...picksList, coin]);
console.log('added 1')
} else {
deleteCoin(coin)
}
}
}
也許我只是不了解 useState 和 prevState，但我似乎找不到任何適用于我在這里嘗試做的示例。創建一個計數器或類似的簡單東西是完全有意義的。
uj5u.com熱心網友回復：
問題是 .indexOf 檢查專案的參考相等性，與使用 .indexOf 相同===。這意味著const a = {id: 'x'}; const b = a; console.log(a === b);將輸出真，但const a = {id: 'x'}; const b = {id: 'x'}; console.log(a === b);將輸出假。
在您的情況下，在更改頁面/重繪 時，狀態會被重置并從本地存盤加載。但是，這會創建參考不相等的新物件。而不是使用.indexOf你想使用.find的東西，比如array.find((element) => element.id === newItem.id)找到專案的索引。您也可以進行自己的深度相等檢查（確認每個欄位匹配），但我懷疑僅 ID 就足夠了。
事實上，我還建議只將“picks”陣列保留為字串 ID 陣列。然后，您可以從表中查找每個 ID 的完整資料。否則當前價格將存盤在 localStorage 中，并且可能已過期。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497013.html