如何在平面列表中调用另一个api?

时间:2019-06-28 10:55:16

标签: reactjs react-native

我有一个具有标题,正文和用户ID的API,我想在另一个API的帮助下打印用户名。那我该怎么办呢? 我在下面列出了这两个API。

  1. https://jsonplaceholder.typicode.com/posts
  2. https://jsonplaceholder.typicode.com/users/1 // $ {id}

getUser(id) {
    let userData = fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(response => response.json())
      .then((responseJson) => {

        return responseJson.name

      })
      .catch(error => console.log(error)) //to catch the errors if any

    console.log(userData);
    return userData;
}; 

1 个答案:

答案 0 :(得分:1)

您可以做的就是首先获取帖子并将其保存在变量中。 然后在地图内部调用其他api来获取用户数据并将用户数据附加到变量中

示例

    fetch('https://jsonplaceholder.typicode.com/posts',)
        .then(response => {
            let new_post = [];
            let posts =  response.json() ;
            Promise.all(
                posts.map(item => {
                    fetch('https://jsonplaceholder.typicode.com/users/'+item.userId)
                        .then(res =>{
                            item['user'] = res.json() ;
                            console.log(item)
                            new_post.push(item)
                        })
                })
            )
                .then(() => {
                    this.setState({testing:new_post})
                })
        })

然后在您的单位列表中显示用户名

            <FlatList
                data={this.state.testing}
                renderItem={({item}) =>(
                        <View>
                            <Text>other</Text>
                            <Text>{item.user.email}</Text>
                        </View>
                    )
                }
            />

或者如果您正在使用axios将数据更改代码发送到

axios.get('https://jsonplaceholder.typicode.com/posts',)
.then(response => {})