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() 方法不是 return 您期望的字符串，而是一个承诺。您应该根据结果更新组件的状态，而不是 returning 任何东西。

请注意，我已将 "this.getStudentName" 替换为 this.state.studentName，这将 return 一个空字符串（如构造函数中定义的那样），直到您的方法 [=11] 的承诺=] 更新状态。一旦承诺完成并且状态更新，它会自动刷新您的视图以显示学生姓名。

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

React-native 函数不返回获取数据

React-native function not returning get data

react-native

react-native-android