React-native函數不返回獲取數據

Question

我只看到「t pera」，但沒有從「t pera」之前的getStudentName函數獲得名稱。

import React, { Component } from 'react'; 

import { 
    Alert, 
    AppRegistry, 
    StyleSheet, 
    Text, 
    Navigator, 
    TextInput, 
    View, 
    Platform, 
    TouchableHighlight, 
    TouchableNativeFeedback, 

} from 'react-native'; 

export class Student extends Component { 

    getStudentName() { 
     return fetch('http://192.168.1.14:3005/api/users/57bf7c101a7c1a892f6a19bc') 
      .then((response) => response.json()) 
      .then((responseJson) => { 
       return responseJson.name; 
     }) 
     .catch((error) => { 
      console.error(error); 
     }) 
    } 

    onButtonPress(){ 

     this.props.navigator.push({ 

      id: 'Student' 

     }) 

    } 

    render() { 

     return(
      <View style={styles.container}> 

       <TextInput style={styles.input} 

        placeholder = "peki" 

       /> 

       <Text> 
        {this.getStudentName}t pera 
       </Text> 

       <TouchableHighlight style={styles.button1} onPress={this.getStudentName}> 

        <Text style={styles.nastavi}>Nastavi</Text> 

       </TouchableHighlight> 

      </View> 
     ); 

    } 

} 

const styles = StyleSheet.create({ 

    container: { 
     flex: 1, 
     backgroundColor: '#FFFFFF', 
     flexDirection: 'column', 
     alignItems: 'center', 
     justifyContent: 'center', 
     padding: 30 
    }, 

    input: { 
     borderBottomColor: 'grey', 
     borderBottomWidth: 1, 
     height: 40, 
     width: 250 
    }, 

    button1: { 

     height: 40, 
     borderRadius: 5, 
     backgroundColor: '#4a4de7', 
     width: 250, 
     marginTop: 20, 
     flexDirection: 'row', 
     alignItems: 'center', 
     justifyContent: 'center' 

    }, 

    button2: { 


     height: 40, 
     borderRadius: 5, 
     backgroundColor: 'black', 
     width: 250, 
     marginTop: 20, 
     flexDirection: 'row', 
     alignItems: 'center', 
     justifyContent: 'center' 

    }, 

    nastavi: { 

     color: 'white', 
     fontSize: 15 

    } 

}); 

module.exports = Student; 

Answer 1

這是因爲您的getStudentName()方法沒有返回您期望的字符串，而是一個承諾。您應該從結果中更新組件的狀態，而不是返回任何內容。

注意下面，我用this.state.studentName替換了「this.getStudentName」，它將返回一個空字符串（在構造函數中定義），直到方法getStudentName()的承諾更新狀態。一旦完成承諾並更新狀態，它會自動刷新您的視圖以顯示學生姓名。

export class Student extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      studentName: '' 
     }; 
    } 

    componentDidMount() { 
     this.getStudentName(); 
    } 

    getStudentName() { 
     var self = this; 
     return fetch('http://192.168.1.14:3005/api/users/57bf7c101a7c1a892f6a19bc') 
      .then((response) => response.json()) 
      .then((responseJson) => { 
       self.setState({ 
        studentName: responseJson.name 
       }); 
      }) 
      .catch((error) => { 
       console.error(error); 
      }); 
     } 

    onButtonPress(){ 
     this.props.navigator.push({ 
      id: 'Student' 
     }) 
    } 

    render() { 
     return(
      <View style={styles.container}> 

       <TextInput 
        style={styles.input} 
        placeholder = "peki" /> 

       <Text> 
        {this.state.studentName}t pera 
       </Text> 

       <TouchableHighlight style={styles.button1} onPress={this.getStudentName.bind(this)}> 
        <Text style={styles.nastavi}>Nastavi</Text> 
       </TouchableHighlight> 

      </View> 
     ); 
    }