1

我已经花了几天时间，在这里阅读了许多文章和答案，我无法理解这一点。下面只是我最后一次尝试。

我只需要使用存储在异步存储中的数据并在 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>始终是一个未解决的自夸对象。

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

在此先感谢您，请记住我是新手，无法做出原生反应。

编辑：最新尝试：

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.

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

4

2 回答 2

0

因为您没有在渲染器上设置状态并获取项目，而不是在任何 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>
  )
}
于 2021-09-19T16:09:07.950 回答
0

修复：

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(() => { storeData('test2') getData() }, [])

  • 我也设置了里面的状态getData()

    用户数据 = 值

于 2021-09-19T17:17:34.770 回答