reactjs - 如何在平面列表中调用另一个 api？

Question

我有一个包含标题、正文和用户 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;
}; 

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