代码之家 › 专栏 › 技术社区 › Siwei

使用异步存储时,react native每隔10毫秒重新呈现一次视图

asyncstorage mobile react-native android

1

Siwei · 技术社区 · 6 年前

我是反应迟钝的新手。(我非常熟悉原始Android)

昨天,当我使用AsyncStorage时(我想是错误的),我遇到了一个问题,视图每N毫秒就重新呈现一次。

我的代码:

import React,  { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'
import { AsyncStorage } from "react-native"

export default class StorageDemo extends Component{

  constructor(props){
    super(props)
    AsyncStorage.setItem("visitTimes", 100)
    this.state = {
      isLoaded: false,
      visitTimes: 0
    }
  }

  readData = async () => {
    try{
      const result = await AsyncStorage.getItem("visitTimes")
      this.setState(
        {
          visitTimes: result,
          isLoaded: true
        }
      )
      console.info("== loaded, this.state: ")
    }catch(error){
      console.error(error)
    }
  }

  render() {
    this.readData()

    if(this.state.isLoaded){
      return(
        <View>
          <Text>Loaded!  </Text>
        </View>
      )
    }else{
      return(
        <View>
          <Text>Loading... </Text>
        </View>
      )
    }

  }
}

我还打开了一个logcat窗口来查看日志,我被日志震惊了:它每10毫秒就重新呈现一次视图。

我的环境:

Android SDK:27
窗户
反应性0.55
设备:vivo Y67A(Android 6.0、4G RAM)

可在此处找到代码: https://github.com/sg552/react_native_lesson_demo/blob/master/screens/StorageDemo.js

我知道我的代码不正确(使用异步,等待),所以我的问题是:

如何从异步存储中读取并将其呈现到页面?如何更正我的代码?

谢谢!

1 回复 | 直到 6 年前

1

3

Siwei 6 年前

好吧,问题是你打电话给func this.readData() 在渲染中,该函数本身正在调用 setState 无论何时调用,都会更改状态,从而触发对组件的重新呈现。所以在这种情况下,您在代码中引起了一个无限循环,因为 设置状态 调用呈现,然后调用 设置状态 你的记忆又一次耗尽了。

若要快速修复此问题,可以从渲染中移除函数调用,并将其添加到按钮中,以便仅在需要时调用它。像这样:

import React,  { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'
import { AsyncStorage } from "react-native"

export default class StorageDemo extends Component{

  constructor(props){
    super(props)
    this.state = {
      isLoaded: false,
      visitTimes: 0
    }
  }

  readData = async () => {
    try{
      const result = await AsyncStorage.getItem("visitTimes")
      this.setState(
        {
          visitTimes: result,
          isLoaded: true
        }
      )
      console.info("== loaded, this.state: ")
    }catch(error){
      console.error(error)
    }
  }

  render() {

    if(this.state.isLoaded){
      return(
        <View>
          <Text>Loaded! {this.state.visitTimes} </Text>
          <Button 
           onPress={() =>  {
            AsyncStorage.setItem("visitTimes", "100")
            this.setState({isLoaded: false})
            }} 
           title="Set Storage Item"
           />
        </View>
      )
    }else{
      return(
        <View>
          <Button 
          onPress={this.readData}
          title="Load from async storage"></Button>
        </View>
      )
    }

  }
}

试试这个,这应该会给你从本地存储的价值!