如何在本機反應中更新數組狀態的項目？

Question

有人可以告訴我如何解決“更新”問題。 我無法動態更新項目，只能手動更新。

這是模式代碼

 // Function (async) for rename the playlist and update const renamePlaylist = async (el) => { try { const result = await AsyncStorage.getItem(STORAGE_KEY); if (result !== null || result !== '') { /* let filterArrayRenamePlaylist = playList.filter((val) => { if (val.id !== el ) { return val; } }); */ console.log(el, ' --------- el'); let renamePlayList = playList.filter((val) => { if ( val.title === el ) { let objIndex = playList.findIndex(obj => obj.title == val.title); playList[objIndex].title = el; // it is not updated ! console.log(el , ' ----------- el 2'); }; }); // const updateList = [...renamePlayList ]; setUpdate(context, {addToPlayList: null, playList: [...renamePlayList] }); return await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(renamePlayList)); } setRenamePlaylistModalVisible(false); } catch (error) { console.log(error) } }

當我嘗試像這樣手動更新播放列表標題時：

 let renamePlayList = playList.filter((val) => { if ( val.title === el ) { let objIndex = playList.findIndex(obj => obj.title == val.title); playList[objIndex].title = 'This works'; // This works // playList[objIndex].title = el; // This does not works console.log(el , ' ----------- el 2'); }; });

我搜索但找不到解決我的問題的方法。

Answer 1

讓我們仔細看看您的代碼以及您的代碼逐行執行的操作，您在那里犯了一些邏輯和代碼風格的錯誤：

let renamePlayList = playList.filter((val) => {
    if ( val.title === el ) {
    let objIndex = playList.findIndex(obj => obj.title == val.title);
        playList[objIndex].title = el; // it is not updated !
        console.log(el , ' ----------- el 2');
    };
});

問題1：不要編寫誤導性函數， filter函數不應該修改任何東西，沒人會期望它這樣做，副作用很糟糕。請考慮將過濾和修改邏輯分開

問題 2：過濾器函數應該返回一個值，真或假。 在您的情況下，它不返回任何內容，無效，因此在您的renamePlayList上面的代碼段中將是一個空數組，[]。

問題 3：邏輯問題本身。

1. 您不需要尋找 objIndex，因為您有來自同一個數組的 val 元素，並且數組過濾函數本身確實提供了當前處理元素的索引，請查看文檔： https ://www.w3schools.com/jsref/ jsref_filter.asp （語法部分）

2. playList[objIndex]在第一次匹配val時絕對等於您的val對象，如果您有更多具有相同標題的元素 - 您的 findIndex 代碼將僅返回第一個找到的元素，所有其余元素都將保持不變

3. 您的 val.title === el 語句和 playList[objIndex].title = el; 沒有任何意義，因為標題在任何情況下都是 el，就像標題是 el 並且您將其重新簽名為 el，如果它是“abc”，則將其重新簽名為“abc”不會改變任何內容。 你的playList[objIndex].title = 'This works'; // This works playList[objIndex].title = 'This works'; // This works完全有效，因為您設置了不同的值。

基於此，我建議將您的過濾器功能更改為

playList
   .filter((val) => val.title === el)
   .forEach((val) => val.title = "new title or whatever you need here, not el btw")

此代碼將修改 playList 中的元素，不確定是否是預期的，但如果不是 - 只需在處理之前對其進行深度克隆。 之后，您的 setUpdate 也需要進行一些更改：

setUpdate(context, {addToPlayList: null, playList: [...playlist] });

請仔細檢查您的代碼在做什么以及您要實現什么。 我的猜測是你的頂級函數需要 2 個參數，比如 oldTitle 和 newTitle 所以它會是

playList
   .filter((val) => val.title === oldTitle)
   .forEach((val) => val.title = newTitle)