Question

我有我的应用程序但是我遇到了 render（）的问题。我想在render（）方法之前执行 AsyncStorage.getItem 。这是代码：

构造函数：

 constructor(props){
        super(props);
        this.state = {displayName: '', avatar:'',isLoading: false};
        console.log('Construtor()');
    }

我想在渲染之前做点什么

componentDidMount() {
    AsyncStorage.getItem('localData', (err, result) => {
        let tmp_localData = JSON.parse(result);
        this.state.displayName = tmp_localData['User']['displayName'];
        this.state.avatar = tmp_localData['User']['avatar'];
        console.log('component didmount');
    });
}

我的渲染方法

  render(){
    const {principal, imagem, titulo, conteudo, rodape, 
    texto,imgConteudo,imgTop,box} = myStyle;

    return(
            <View style={titulo}>
                <Text>    </Text>
                <Text>Nome da Loja</Text>
                <TouchableHighlight onPress={()=> {this.props.navigator.push({id: 'Users'});}} style={box}
                                    activeOpacity={1} underlayColor={'white'}>
                    <Image source={caminhoUsers} style={[imgTop]}/>
                </TouchableHighlight>
            </View>

我尝试了一切，但没有任何作用。有人会解释我在渲染之前执行某些操作需要做什么吗？

Answer 1

试试这个例子

constructor(props){
    super(props);
    // make sure you cahnge the value of isLoading
    this.state = {displayName: '', avatar:'', isLoading: true };
    console.log('Construtor()');

    //Call the function
    this.loadData();
}

async loadData() {
    try {
        await AsyncStorage.getItem('localData', (err, result) => {
             let tmp_localData = JSON.parse(result);
             this.state.displayName = tmp_localData['User']['displayName'];
             this.state.avatar = tmp_localData['User']['avatar'];
             this.setState({ isLoading: false });
             console.log('component didmount');
         });
    } catch (error) {
        console.log(error);
    }
}

render() {
   // Here goes the render
   if ( this.state.isLoading ) {
       return (
      // The data to be shown after data load
         <View style={styles.overlay}>
           <Text>Loading</Text>
         </View>
      };
   }

   return (
      // The data to be shown after data load
   };
}

const styles = StyleSheet.create({
   overlay: {
      position: 'absolute',
      backgroundColor: '#fff',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 100,
      justifyContent: 'center',
      alignItems: 'center'
   }
});

如果您发现任何问题，请告诉我们！如果您真的需要预加载器以及此示例，我很乐意为您提供帮助。

我在5个地方添加了评论并阅读了相应的代码！

Answer 2

试试这个。

Error in filter_impl(.data, quo) : 
  Evaluation error: object 'y' not found.

根据生命周期，componentWillMount（）将在render（）之前执行。请参阅此link

如何在render（）之前更新Value

2 个答案: