Question

我正在使用React本机代码，但有些代码无法正常工作。请让我检查一下如何解决。我正在从缓存中获取价值，并试图返回并显示价值。

如果有人有任何想法，我尝试了一些代码不起作用的方法，请告诉我

import React, { memo } from 'react';
import { Text, View, StyleSheet, AsyncStorage } from 'react-native';
import { theme } from "../core/theme";

class Dashdata extends React.Component{
    constructor(){
        super();
        this.getDataName = this.getDataName.bind(this);
        this.state = {
            displayname: ''
          };
    }
    getDataName = () => {
        const displayname = '';
            console.log('getting value from cachedd');
            const loginName =  AsyncStorage.getItem('@kidssafety:displayname')
            .then((result)=>{
              console.log(result);
              return (
                <Text>{result}</Text>
                )
            });
    }

    render(){
        return(
            <View>
                <Text style={styles.header}>Welcome Data {this.getDataName()}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    header: {
      fontSize: 22,
      color: theme.colors.primary,
      fontWeight: "bold",
      paddingVertical: 14,
      flex: 1,
      marginTop: 100,
      width: '100%',
      textAlign: 'left'
    }
  });

export default memo(Dashdata);

Answer 1

AsyncStorage返回一个承诺。因此，您必须等到问题解决为止。

使用异步/等待来解决您的问题。

getDataName = async () => {
    const loginName = await AsyncStorage.getItem('@kidssafety:displayname')
    this.setState({
        displayname: loginName
    })
}

现在您可以在渲染器中显示值

<Text style={styles.header}>Welcome Data {this.state.displayname}</Text>

重要

由于您将getDataName用作箭头函数，因此不必将其绑定为

this.getDataName = this.getDataName.bind(this)

希望这对您有所帮助。放心怀疑。

Answer 2

AsyncStorage.getItem返回一个Promise，当它解析并返回一个值时，您的渲染将移至下一行。理想情况下，您应该将result存储到状态并在准备就绪时使用它。然后您的组件将看起来像。

import React, { memo } from 'react';
import { Text, View, StyleSheet, AsyncStorage } from 'react-native';
import { theme } from "../core/theme";

class Dashdata extends React.Component{
    constructor(){
        super();
        this.getDataName = this.getDataName.bind(this);
        this.state = {
            displayname: '',
            result: '' // add result here
          };
    }
    getDataName = () => {
        const displayname = '';
            console.log('getting value from cachedd');
            const loginName =  AsyncStorage.getItem('@kidssafety:displayname')
            .then((result)=>{
              console.log(result);
              this.setState({result}) // set result to state 
            });
    }

    render(){
        const { result } = this.state
        return(
            <View>
                {!!result && (<Text style={styles.header}>Welcome Data {result})</Text>}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    header: {
      fontSize: 22,
      color: theme.colors.primary,
      fontWeight: "bold",
      paddingVertical: 14,
      flex: 1,
      marginTop: 100,
      width: '100%',
      textAlign: 'left'
    }
  });

export default memo(Dashdata);

反应本机函数返回值未显示

2 个答案: