是否有替换JSON值的流程/实践?具体而言，用API提供的值替换API URL

Question

我正在使用《星球大战》API进行练习，但我遇到了一个奇怪的bug。我很确定我是这里的问题所在，但我对这些过程的了解不够，无法找到问题所在。

我正在使用此信息创建个人资料卡，但当我尝试用实际名称替换homeworld url时，我无法更改react元素中显示的值

这是我从API获得的JSON对象的较小版本。

{
"name": "Luke Skywalker",
"height": "172",
"mass": "77",
"birth_year": "19BBY",
"gender": "male",
"homeworld": "https://swapi.co/api/planets/1/",           
},

在将homeworld保存到this.state数组之前，我试图用实际homeworld的名称替换它的url值。我试过从元素文件中进行fetch调用(感觉不太合适)。所以我把一些代码拼凑在一起，看着它随着console.log();的变化。它不是最漂亮的。

fetch('https://swapi.co/api/people/')
.then(response => {
return response.json();
})
.then(array => {
console.log(array.results);
Promise.all(array.results.map(character => {
console.log(character.homeworld)
let home_url = character.homeworld;
fetch(home_url)
.then(home => {return home.json()})
.then(home_json => character.homeworld = home_json.name)
}))
.then(() => {
console.log(array.results)
this.setState({characters:array.results})
});
});

console.log();表示homeworld的值已更改为字符串'Tatooine'。一直到配置文件卡都是一样的。所以我本以为这是卡片中的值'Tatooine'，但我最终得到了"https://swapi.co/api/planets/1/"。

在这一点上，我不知道我的知识不足在哪里。我不确定这是否是JSON、React、Fetch/Promises的问题。因此，如果有人能够在这个问题上提供一些见解，那就太好了。如果需要，我可以在帖子中添加更多代码。干杯

Answer 1

您需要在每个.then调用中返回一些内容，以便继续传递更新的数据。同样在Promise.all( array.results.map(中，您应该返回每个元素，这样您就不会得到一个充满undefined的数组。

以下是如何做到这一点的示例(注意，我建议至少在Promise.all部分使用async/await)：

componentDidMount() {
fetch("https://swapi.co/api/people/")
.then(response => response.json())
.then(array => {
console.log(array.results);
return Promise.all(array.results.map(async character => {
console.log(character.homeworld);
const homeUrl = character.homeworld;
const home = await fetch(homeUrl);
const homeJson = await home.json();
return {
...character,
homeworld: homeJson,
}
}));
})
.then(characters => {
console.log(characters);
this.setState({ characters });
})
}

再次在各处使用async/await：

componentDidMount() {
this.fetchData();
}
async fetchData() {
const response = await fetch("https://swapi.co/api/people/");
const array = await response.json();
console.log(array.results);
const characters = await Promise.all(array.results.map(async character => {
console.log(character.homeworld);
const homeUrl = character.homeworld;
const home = await fetch(homeUrl);
const homeJson = await home.json();
return {
...character,
homeworld: homeJson,
}
}));
console.log(characters);
this.setState({ characters });
}

则CCD_ 15是长度为10的阵列。这里有一个示例元素：

{
birth_year: "41.9BBY"
created: "2014-12-10T15:18:20.704000Z"
edited: "2014-12-20T21:17:50.313000Z"
eye_color: "yellow"
films: (4) ["https://swapi.co/api/films/2/", "https://swapi.co/api/films/6/", "https://swapi.co/api/films/3/", "https://swapi.co/api/films/1/"]
gender: "male"
hair_color: "none"
height: "202"
homeworld: {name: "Tatooine", rotation_period: "23", orbital_period: "304", diameter: "10465", climate: "arid", …}
mass: "136"
name: "Darth Vader"
skin_color: "white"
species: ["https://swapi.co/api/species/1/"]
starships: ["https://swapi.co/api/starships/13/"]
url: "https://swapi.co/api/people/4/"
vehicles: []
}