React-native関数がデータを返さない

Question

「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.getStudentName」をthis.state.studentNameに置き換えました。これは、メソッド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> 
     ); 
    }