如何在本机反应中更新数组状态的项目？

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)