React-native функция не возвращает данные

Question

Я вижу только «t pera», но не получил имя от getStudentName функции до «t pera».

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> 
     ); 
    }