使用 React Native 和 Async Storage 解决 promise 问题

Question

我已经花了几天时间，在这里阅读了很多文章和答案，但我无法解决这个问题。下面是我最后一次尝试。

我只需要使用存储在 Async Storage 中的数据并在 App()

中使用它

有人可以看看这个简单的 App() 起始代码，并以最简单的方式解释如何解决这里的承诺。

import { StatusBar } from 'expo-status-bar'
import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Button, Input } from 'react-native-elements'
import Icon from 'react-native-vector-icons/FontAwesome'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default async function App () {
  let [userData, setUserData] = useState({})

  useEffect(() => {
    storeData('test2')
    getItem()
  }, [])

  const storeData = async value => {
    try {
      await AsyncStorage.setItem('@storage_Key', value)
    } catch (e) {
      // saving error
    }
  }

  const getItem = async () => {
    const value = await AsyncStorage.getItem('@storage_Key')
    return value
  }

  userData = getItem()
  console.log(userData)

  return (
    <View style={styles.container}>
      <Text>Local storing: {userData}</Text>
      <StatusBar style='auto' />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

<Text>Local storing: {userData}</Text> 始终是未解决的 proise 对象。

我在之前的代码中取得了一些成功，其中 console.log(userData) 实际上产生了想要的值，但它在 <Text> 中仍然不可用。我只是不明白。

提前谢谢你，请记住我是 React Native 的新手。

编辑：最新尝试：

import { StatusBar } from 'expo-status-bar'
import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Button, Input } from 'react-native-elements'
import Icon from 'react-native-vector-icons/FontAwesome'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default async function App () {
  let [userData, setUserData] = useState({})

  const storeData = async value => {
    try {
      await AsyncStorage.setItem('@storage_Key', value)
    } catch (e) {
      // saving error
    }
  }

  storeData('test2')


  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('@storage_Key')
      if(value !== null) {
        console.log(value)
        return value
      }
    } catch(e) {
      // error reading value
    }
  }
  

  userData = await getData()
  console.log(userData)

  return (
    <View style={styles.container}>
      <Text>Local storing: {userData}</Text>
      <StatusBar style='auto' />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

现在由于某种原因我得到 4 test2 ，记录了正确的控制台值但仍然收到错误：

Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.

这是一个 promise 对象，应用程序无法构建。

Answer 1

因为您不是在渲染器上设置状态和获取项目，而不是在任何 useEffect 上，这也是一种不好的做法。

试试这个

export default async function App () {
  let [userData, setUserData] = useState('')

  useEffect(() => {
    storeData('test2')
  }, [])

  const storeData = async value => {
    try {
      await AsyncStorage.setItem('@storage_Key', value)
      getItem()
    } catch (e) {
      // saving error
    }
  }

  const getItem = async () => {
    const value = await AsyncStorage.getItem('@storage_Key')
    setUserData(JSON.stringify(value))
  }

  console.log(userData)

  return (
    <View style={styles.container}>
      <Text>Local storing: {userData}</Text>
      <StatusBar style='auto' />
    </View>
  )
}

Answer 2

已修复：

import { StatusBar } from 'expo-status-bar'
import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Button, Input } from 'react-native-elements'
import Icon from 'react-native-vector-icons/FontAwesome'
import AsyncStorage from '@react-native-async-storage/async-storage'

const storeData = async value => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

storeData('test2')



export default function App () {
  let [userData, setUserData] = useState('')

  useEffect(() => {
    getData()
  }, [])

  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('@storage_Key')
      if (value !== null) {
        console.log(value)
        setUserData(value)
        userData = value
      }
    } catch (e) {
      // error reading value
    }
  }


  console.log(userData)

  return (
    <View style={styles.container}>
      <Text>Local storing: {userData}</Text>
      <StatusBar style='auto' />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default function App () {
中不应该有异步
getData() 获取数据应该在 useEffect
里面启动
useEffect(() => { 存储数据（'test2'）获取数据() }, [])
里面状态我也设置好了getData()

用户数据=值

使用 React Native 和 Async Storage 解决 promise 问题

Resolving promise issue with react native and Async Storage

javascript

asynchronous

rect

promise

react-native