Javascript 是否有替换JSON值的流程/实践？具体来说，使用API提供的值替换API URL

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

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

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

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

在保存到我的

this.state

数组之前，我试图用实际家庭世界的名称替换家庭世界的url值。我尝试过从元素文件中调用fetch（感觉不太合适）。所以我把一些代码拼凑在一起，用

console.log（）观察它的变化。这不是最漂亮的


fetch（'https://swapi.co/api/people/')
。然后（响应=>{
返回response.json（）；
})
。然后（数组=>{
console.log（array.results）；
Promise.all（array.results.map）（字符=>{
console.log（character.homeworld）
让home\u url=character.homeworld；
获取（主url）
.then（home=>{return home.json（）}）
.然后（home\u json=>character.homeworld=home\u json.name）
}))
.然后（（）=>{
console.log（array.results）
this.setState（{字符：array.results}）
});
});
您需要在每个
中返回一些内容。然后调用
以继续传递更新的数据。同样在
Promise.all（array.results.map）（
中，您应该返回每个元素，这样您就不会得到一个充满
未定义的
数组

下面是一个如何做到这一点的示例（注意，我建议使用
async
/
wait
至少用于
Promise.all
部分）：

componentDidMount（）{
取回（“https://swapi.co/api/people/")
.then（response=>response.json（））
。然后（数组=>{
console.log（array.results）；
返回Promise.all（array.results.map）（异步字符=>{
console.log（character.homeworld）；
const homeUrl=character.homeworld；
const home=等待获取（homeUrl）；
const homeJson=wait home.json（）；
返回{
性格
homeworld:homeJson，
}
}));
})
。然后（字符=>{
console.log（字符）；
this.setState（{characters}）；
})
}

再次在任何地方使用
async
/
wait
：

componentDidMount（）{
这是fetchData（）；
}
异步获取数据（）{
const response=等待获取（“https://swapi.co/api/people/");
const array=await response.json（）；
console.log（array.results）；
const characters=wait Promise.all（array.results.map）（异步字符=>{
console.log（character.homeworld）；
const homeUrl=character.homeworld；
const home=等待获取（homeUrl）；
const homeJson=wait home.json（）；
返回{
性格
homeworld:homeJson，
}
}));
console.log（字符）；
this.setState（{characters}）；
}

然后
this.state.characters
是一个长度为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: []
}

可能你只需要在第二个
中返回
。然后
调用？在.map中你需要在第二个
中返回fetch
。然后
调用-现在你的
承诺。所有的
都只是得到一个
未定义的
数组。谢谢Matthew！返回调用实现了这一点。我知道为什么值没有更新ated。感谢您对异步函数的说明。这是我尝试的另一个流程，我对异步/等待函数的理解也是非常新的。我将尝试实现它，并回答您提出的任何问题。@Jordan当然，让我知道它是如何运行的goesHey Henry，看起来异步函数仍然在运行，并且没有改变任何错误调用
render（）
时，y数据被调用。我最终遇到错误，控制台以不同的顺序记录。这就是承诺与异步函数的区别吗？异步函数是真正异步的！我们等待承诺吗？@Jordan这是发出API请求（或任何异步操作）时的常见问题在
componentDidMount
方法中。调用构造函数后会立即调用
render
方法，因此
render
方法应该能够处理
componentDidMount
尚未完成时的情况。这就是设置正确类型的初始状态的重要性所在（例如，
characters:[]
），您还可以添加一个
isLoading
状态变量，如果
isLoading
为true，则只需呈现一个加载组件即可。您在第一句中明确回答了问题。
您需要在每个变量中返回一些内容。然后调用以继续传递更新的数据。
谢谢@Henry。