如何获取api获取结果并在响应本机的卡内查看结果?

时间:2017-11-01 06:04:20

标签: reactjs react-native fetch

Profile.js

fetch('http://test.wehubs.in/MobileApp/profile.php',{
    method: 'POST' ,
    headers:{
        'Accept': 'application/json'
    },
    body: JSON.stringify({
        uuid: value
    })
}).then(response =>response.json())
.then((responseData) =>
{
    });

我想通过从db获取内容来显示用户配置文件详细信息。我想在卡内显示此结果吗?如何实现?

const Profile = (props)=>{
    return(

<Card>
  <CardImage
  source={require('')} style={styles.imagestyle} />
  <CardTitle title="Name" />
  <CardContent text="Location bloodgroup"/>
    <CardButton
      onPress={() => {}}
      title="Back"
      color='red'
    />
</Card>

 );
}

上面是我在卡片中显示详细信息的代码。我想在CardTitle的fetch响应中显示用户名。请帮帮我。不知道该怎么做。

2 个答案:

答案 0 :(得分:3)

获取代码应该在componentDidMount中。它应该更新组件的状态。

.then((responseData) => {
  this.setState({ user: responseData });
});

CardTitle应显示状态。

<CardTitle title={this.state.user && this.state.user.name} />

答案 1 :(得分:2)

我已经像这样编辑了获取响应

}).then(response =>response.json())
.then((responseData) =>
{
    this.setState({
        user: (responseData.name),
        usernew: (responseData.bloodgroup),
        loaded:true,
    })

然后我就可以在卡内访问此响应。

<CardTitle style={styles.containerStyle} title={this.state.user} />