React Native更新数组state元素动态赋值不生效如何解决

问题核心原因 #

你的代码存在4个关键逻辑错误，直接导致动态赋值失效：

• 对Array.filter的用法完全错误：filter的作用是返回符合判断条件的元素组成新数组，回调函数需要返回布尔值，你在回调里直接修改原状态数组，本身违反React状态不可变原则，且没有返回判断值，最终得到的renamePlayList永远是空数组。硬编码能生效只是因为直接修改了原状态的引用值碰巧触发渲染，属于逻辑错误下的偶现效果。
• 匹配与赋值逻辑矛盾：你的判断条件是val.title === el，匹配成功后又把val.title赋值为el，值没有任何变化，自然看不到更新效果。硬编码时赋值为固定字符串'This works'，和原值不同才会出现变化。另外如果el是你要设置的新标题，这个判断条件永远无法匹配到原有列表项（原有项存的是旧标题），修改逻辑根本不会执行。
• 存储判断逻辑永真：if (result !== null || result !== '') 这个条件永远成立，不管AsyncStorage取到什么值都会进入分支，属于典型的逻辑运算符写错，应该用&&。
• 直接修改原状态：直接通过索引修改playList[objIndex].title属于直接修改状态原值，会导致状态变更不触发渲染、状态不一致等隐性问题。

正确实现代码 #

首先调整函数入参，需要传入两个值：待修改播放列表的唯一ID（不要用title匹配，title可能重复）、修改后的新标题，修正后的完整逻辑如下：

// 入参：targetId 待修改播放列表的id，newTitle 修改后的新标题
const renamePlaylist = async (targetId, newTitle) => {
  try {
    const result = await AsyncStorage.getItem(STORAGE_KEY);
    // 修正判断逻辑，只有取到有效存储值才走后续逻辑
    if (result !== null && result !== '') {
      // 用map生成新数组，遵循状态不可变原则，不修改原数组
      const updatedPlayList = playList.map(item => {
        // 匹配到目标项时，返回新的对象副本，更新title
        if (item.id === targetId) {
          return {
            ...item,
            title: newTitle
          }
        }
        // 非目标项直接返回原值
        return item
      });

      // 更新全局状态
      setUpdate(context, { addToPlayList: null, playList: updatedPlayList });
      // 持久化到本地存储
      await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updatedPlayList));
    }
    setRenamePlaylistModalVisible(false);
  } catch (error) {
    console.log('重命名播放列表失败：', error)
  }
}

调用示例 #

比如你要把id为123的播放列表改名为我喜欢的音乐，直接调用即可：

renamePlaylist(123, '我喜欢的音乐')

内容的提问来源于stack exchange，提问作者Dev007