如何在 React 应用程序启动时检索本地存储数据并使用 useEffect 将其存储在 Redux 中?(它不断清除我

Question

编辑：也许我不应该在同一个应用程序中组合 React 钩子和 mapStateToProps，而是使用 Redux 钩子(useSelector 等(？

在我的 React 应用程序中，我在 Redux 中有一组"朋友"数据。 我在我的一个组件中使用useEffect，以便在每次更改时将此数据存储到浏览器 localStorage。

// 'friends' is an array from Redux store,
// storeManyFriends is an action creator that will store to Redux
const {friends, storeManyFriends} = props;
// store 'friends' to local storage each time it changes
useEffect(() => {
try {
persistData(friends,'my friends') // stores to local storage
} catch (e) {
console.log('error persisting data',e.message)
}
}, [friends]);

我想在应用程序启动时从 localStorage 加载该数据(如果存在(，并使用useEffect将其存储在 Redux 中。

useEffect(() => {
// get stored 'friends' from local storage on component mount
const storedFriends = retrievePersistedData('my friends') 
if (storedFriends) {
try {
storeManyFriends(storedFriends)
} catch (e) {
console.log('error retrieving data',e.message)
}
}
}, []);

问题在于，当应用程序重新启动时，似乎第一个useEffect被调用为空friends数组，然后将其存储到 localStorage，从而清除其中的内容。我可以在存储数组之前检查数组是否为空，但有时数组会为空，因为有人没有朋友，我想存储该空值。 处理此问题的最佳方法是什么？

作为参考，Redux 存储的初始状态为

export const originalState = {
friends: [],
};

Answer 1

有 3 种情况：

• 本地存储中没有密钥
• 空数组
• 带数据的数组

获取时，如果空数组尚不存在，请先创建它。这将确保保存时始终有一个键(带有空数组(。