用reactnative和Async存盤解決承諾問題

我已經花了好幾天時間，在這里讀了許多文章和答案，但我無法理解這一點。下面是我在這方面的最后一次嘗試。

我只需要使用存盤在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 } 來自 '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'/span>, value)
    } catch (e) {
      //保存錯誤。
    }
  }

  const getItem = async ( ) => {
    const value = await AsyncStorage.getItem（'@storage_Key')
    回傳值
  }

  userData = getItem()
  console.log(userData)

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

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

<Text>本地存盤。{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 } 來自 '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'/span>, value)
    } catch (e) {
      //保存錯誤。
    }
  }

  storeData('test2')


  const getData = async ( ) => {
    try {
      const value = await AsyncStorage.getItem（'@storage_Key')
      if(value !== null) {
        console.log(value)
        return value
      }
    } catch(e) {
      //錯誤讀取值。
    }
  }
  

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

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

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

現在我得到了一些原因，4個測驗2，正確的值被安慰記錄，但仍然得到了一個錯誤：

我得到了一些原因。

Error。Objects不是有效的as一個React子（found: object with keys {_U, _V, _W, _X}）。) 如果你想渲染一個集合的孩子，用一個陣列代替。

這是一個承諾物件，應用程式無法構建。

uj5u.com熱心網友回復：

因為你沒有在渲染器上設定狀態和獲取專案，而不是在任何useEffect上，這也是一個糟糕的做法。

試試這個

uj5u.com熱心網友回復：

解決了：

import { StatusBar } from 'expo-status-bar' 
import React, { useState, useEffect } from 'react
import { StyleSheet, Text, View } from 'react-native' 
import { Button, Input } 來自 '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'/span>, value)
  } catch (e) {
    //保存錯誤。
  }
}

storeData('test2')



export default function App （）{
  let [userData, setUserData] = useState(''/span>)

  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) {
      //錯誤讀取值。
    }
  }


  console.log(userData)

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

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

• 在export default function App () {

  中不應該有async。

• getData()獲取資料應該是在useEffect

  里面進行的。

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

• 我也在getData()

  內設定了狀態。

  userData = value

標籤：

上一篇：在Compose中增加AlertDialog的標題和文本之間的空間

下一篇：在客戶站點上編輯Docker鏡像內的組態檔