如何获取 api 获取结果并在 react native 中的卡片内查看结果

Question

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

我想通过从数据库获取内容来显示用户配置文件详细信息。我还想在卡片中显示此结果？怎么可能？

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 处显示来自获取响应的用户名。请帮助我。不知道该怎么做。

Answer 1

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

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

CardTitle 应显示状态。

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

Answer 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} />