React Native：通过 AsyncStorage 保存数组并检索它答案

【问题标题】：React Native: Saving array via AsyncStorage and retrieving itReact Native：通过 AsyncStorage 保存数组并检索它
【发布时间】：2020-07-22 09:13:38
【问题描述】：

我正在尝试从我的 Redux-Store 状态中获取一个名为 user 的对象数组并将其保存到异步存储中，并使用 useState 和 response 到 set the state，然后再检索它并查看它FlatList 但是我收到Warning: Can't perform a React state update on an unmounted component. 的错误 user 详细信息被设置为另一个组件中的 redux 存储，然后从我正在显示的当前组件中检索。请问我能得到你的帮助吗？我真的很感激。提前谢谢！！！

const TheUser = (props) => {
    //user is an array from redux store
    const user = useSelector(state => state.account.cookbook)
    const [getUser, setGetUser] = useState()

    const saveUserAsync = async () => {
        await AsyncStorage.setItem('user', JSON.stringify(user))
    }
    saveUserAsync()

    AsyncStorage.getItem('user').then(response => {
        setGetUser(response)
    })
    return (
        <FlatList
            data={getUser}
            keyExtractor={item => item.id}
            renderItem={itemData =>
                <MyUser
                    name={itemData.item.name}
                    image={itemData.item.imageUri}
                    details={itemData.item.details.val}
                />
            }
        />
    )
}
export default TheUser

【问题讨论】：

标签： javascript react-native redux react-redux react-native-flatlist

【解决方案1】：

你可以使用useEffect钩子来解决这个问题。

IS_MOUNTED 变量将跟踪组件是否已安装。

let IS_MOUNTED = false;   // global value

const TheUser = (props) => {
    //user is an array from redux store
    const user = useSelector(state => state.account.cookbook)
    const [getUser, setGetUser] = useState()

    const saveUserAsync = async () => {
        await AsyncStorage.setItem('user', JSON.stringify(user))
    }
    AsyncStorage.getItem('user').then(response => {
        if(IS_MOUNTED)
         {
            setGetUser(JSON.parse(response));
         }
    });


    useEffect(() => { 
         IS_MOUNTED = true;
         saveUserAsync();
        return (() => {
            IS_MOUNTED = false;  
         })
     },[])
    return (
        <FlatList
            data={getUser}
            keyExtractor={item => item.id}
            renderItem={itemData =>
                <MyUser
                    name={itemData.item.name}
                    image={itemData.item.imageUri}
                    details={itemData.item.details.val}
                />
            }
        />
    )
}
export default TheUser

【讨论】：

感谢您的详细回复。在我在 flatList 中查看它之前保存 redux 状态的地方是我正在做的事情，还是有更好的方法来做到这一点。请告诉我。
另外，当我按下保存时，我只会看到组件更新。我该如何避免这种情况，因为当我在模拟器上添加新结果时，它会添加它，但我无法查看它，直到我再次在我的文件上按保存。我该如何解决这个问题？

【解决方案2】：

import { useEffect } from "react"
let isMount = true
const TheUser = (props) => {
    //user is an array from redux store
    const user = useSelector(state => state.account.cookbook)

    // const [getUser, setGetUser] = useState()

    // useEffect(() => {
    //     const saveUserAsync = async () => {
    //         await AsyncStorage.setItem('user', JSON.stringify(user))

    //         const response = await AsyncStorage.getItem('user')
    //         if (isMount)
    //             setGetUser(JSON.parse(response))
    //     }
    //     saveUserAsync()


    // }, [user])

    // useEffect(() => {
    //     isMount = true
    //     return () => {
    //         isMount = false
    //     }
    // }, [])
    return (
        <FlatList
            // data={getUser}
            data={user}
            keyExtractor={item => item.id}
            renderItem={itemData =>
                <MyUser
                    name={itemData.item.name}
                    image={itemData.item.imageUri}
                    details={itemData.item.details.val}
                />
            }
        />
    )
}
export default TheUser

【讨论】：