从 AsyncStorage 更新数组答案

【问题标题】：Updating Array from AsyncStorage从 AsyncStorage 更新数组
【发布时间】：2020-11-21 12:54:15
【问题描述】：

我有一个名为 audioBaby 的对象数组。

当应用程序启动时，我检查asyncStorage，如果任何键的值active，我想更新数组中的lock 键。

我所做的不是更新数组中的所有对象，而是更新最后一个对象。

我如何initially 从asyncStorage 更新数组并渲染屏幕？

const [audioBaby, setAudioBaby] = useState([
  {
    lock: "deactive",
    url: "item0.mp3",
  },
  {
    lock: "deactive",
    url: "item1.mp3",
  },
  {
    lock: "deactive",
    url: "item2.mp3",
  },
]);

useEffect(() => {
  try {
    AsyncStorage.multiGet([
      "babyAudio0Status", //value: active
      "babyAudio1Status", //value: active
      "babyAudio2Status", //value: active
    ]).then((response) => {
      let updatedList = audioBaby;
      if (response[0][1] != "null" && response[0][1] == "active") {
        updatedList = audioBaby.map((item) => {
          if (item.url == "item0.mp3") {
            return { ...item, lock: "active" };
          }
          return item;
        });
      }
      if (response[1][1] != "null" && response[1][1] == "active") {
        updatedList = audioBaby.map((item) => {
          if (item.url == "item1.mp3") {
            return { ...item, lock: "active" };
          }
          return item;
        });
      }
      if (response[2][1] != "null" && response[2][1] == "active") {
        updatedList = audioBaby.map((item) => {
          if (item.url == "item2.mp3") {
            return { ...item, lock: "active" };
          }
          return item;
        });
      }
      setAudioBaby(updatedList)
    });
  } catch (error) {
    console.log("error::", error);
  }
}, []);

最终的数组应该是这样的：

[
    {
      lock: "active",
      url: "item0.mp3",
    },
    {
      lock: "active",
      url: "item1.mp3",
    },
    {
      lock: "active",
      url: "item2.mp3",
    },
]

【问题讨论】：

看看response 在multiGet 之后的样子会很有帮助。此外，无关紧要，除非您有充分的理由，否则您应该使用 === 而不是 == 和 !== 而不是 !=。
谢谢，我已经解决了问题，并按照您所说的修正了等式。

标签： javascript arrays reactjs react-native asyncstorage

【解决方案1】：

我将所有ifs 移动到map 函数内部，一切都很好。

  let updatedList = audioBaby.map((item) => {
          if (item.url === 'item0.mp3' && response[0][1] === 'active') {
            return { ...item, lock: 'active' }
          }
          if (item.url === 'item1.mp3' && response[1][1] === 'active') {
            return { ...item, lock: 'active' }
          }
          if (item.url === 'item2.mp3' && response[2][1] === 'active') {
            return { ...item, lock: 'active' }
          }
          return item
        })

【讨论】：