react-native 无法显示我获取的值

Question

我无法显示从我的 fetch 中检索到的值到我的

这是我的代码，但我得到'null is not an object'：

import React, {Component} from 'react';
import { StyleSheet, Image, Text, View, TextInput, StatusBar, Button,         
AppRegistry, TouchableHighlight, TouchableOpacity  } from 'react-native';
import AndroidBackButton from 'react-native-android-back-button'
import { StackNavigator } from 'react-navigation'

export default class ComponenFive extends React.Component {

getInfos(){
    fetch('http://172.16.101.183:3000/users', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            requestType: 'infosCompte'
        })
    })            
    .then((response) => response.json())
    .then((res) => {
            this.setState({username: res.username, nom: res.nom, prenom: res.prenom, lieu: res.lieu, batiment: res.batiment, bureau: res.bureau});
    })
    .done();
}


render() {
    {this.getInfos}
    return ( 
        <View style={{backgroundColor: 'white', flex: 1}}>
            <Text>Identifiant : {this.state.username}</Text>
        </View>
    )
}

}

你有什么想法可以帮助我吗？

Answer 1

res 已经是 json。直接从资源中提取数据。

console.log(res);
let resData = JSON.parse(res._bodyText);
this.setState({username: resData.username, nom: resData.nom, .....})

Answer 2

使用 fetch 您获得的不仅仅是 json 上的数据。

试试这个例子

fetch('http://172.16.101.183:3000/users', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            requestType: 'infosCompte'
        })
    })            
    .then(response => response.json().then(json => ({ json, response })))
    .then(({ json, response }) => {
        if (!response.ok) {
            return Promise.reject(json);
        }
        return json;
    })  
    .then((res) => {
            this.setState({username: res.username, nom: res.nom, prenom: res.prenom, lieu: res.lieu, batiment: res.batiment, bureau: res.bureau});
    })
    .done();

更新：

抱歉，刚刚看到您的代码，不正确。在 render() 上使用 {this.getInfos} 是错误的。 getInfo 只是一个函数。你不返回任何东西。如果您想按原样调用此函数，请使用 componentWillMount 并在构造函数上设置状态

constructor(props) {
    super(props);
    this.state = {username: '', nom: ''};
}
componentWillMount() {
    this.getInfos()
}