Javascript react中未定义Fetch return

我尝试将WordPress API与react一起使用，但它返回id而不是标记名，因此我尝试使用另一个API调用获取标记名。但它总是返回未定义的。当我在getCategory（）内的fetch之前添加return时，它只会出错

componentDidMount() {
const URL =
  'https://public-api.wordpress.com/wp/v2/sites/sitename/posts/';

  fetch(URL)
  .then(res => res.json())
  .then(posts => {

    const post = posts.map(post => {
      return {
        ...post,
        categories: this.getCategory(...post.categories)
      };
    });

    this.setState({ posts: post });

    console.log(post);
  })
  .catch(err => console.log(err));
  }

  getCategory(id) {
   const URL = `https://public-api.wordpress.com/wp/v2/sites/sitename/categories/${id}`;

fetch(URL)
  .then(data => data.json())
  .then(res => res.name)
 }

---

第一：getCategory方法不返回任何内容

getCategory(id) {
   const URL = `https://public-api.wordpress.com/wp/v2/sites/sitename/categories/${id}`;

return fetch(URL).then(data => data.json()).then(res => res.name);

}

第二：当您运行setState方法（可能）时，http类别请求（getCategory）仍在运行，所以还没有设置类别

---

在调用setState方法之前，应该使用方法确保所有http请求都已完成

first:getCategory方法不返回任何内容

getCategory(id) {
   const URL = `https://public-api.wordpress.com/wp/v2/sites/sitename/categories/${id}`;

return fetch(URL).then(data => data.json()).then(res => res.name);

}

第二：当您运行setState方法（可能）时，http类别请求（getCategory）仍在运行，所以还没有设置类别

---

在调用setState方法之前，应该使用方法确保所有http请求都已完成

基本上，您的问题是在

getCategory

中的

fetch

解决之前设置状态。要解决这个问题，您可以等待其结果--

---

基本上，您的问题是在

getCategory

中的

fetch

解决之前设置状态。要解决这个问题，您可以等待其结果--

---

参考@lyosha korogoda的答案，如果您不能使用

async/await

，请尝试以下方法：

componentDidMount() {
  const URL = 'https://public-api.wordpress.com/wp/v2/sites/<YOUR_WORDPRESS_URL>/posts/';

  fetch(URL)
    .then(res => res.json())
    .then(posts => {
      this.getCategory(...post.categories).then(category => {
        const post = posts.map(post => {
          return {
            ...post,
            categories: category
          };
        });
        this.setState({ posts: post });
        console.log(post);
      })
    })
    .catch(err => console.log(err));
}

getCategory(id) {
  const URL = `https://public-api.wordpress.com/wp/v2/sites/<YOUR_WORDPRESS_URL>/categories/${id}`;

  return fetch(URL)
    .then(data => data.json())
    .then(res => res.name)
}

componentDidMount（）{
常量URL=https://public-api.wordpress.com/wp/v2/sites//posts/';
获取（URL）
.then（res=>res.json（））
。然后（posts=>{
this.getCategory（…post.categories）。然后（category=>{
const post=posts.map（post=>{
返回{
邮递
类别：类别
};
});
this.setState（{posts:post}）；
控制台日志（post）；
})
})
.catch（err=>console.log（err））；
}
getCategory（id）{
常量URL=`https://public-api.wordpress.com/wp/v2/sites//categories/${id}`；
返回获取（URL）
.then（data=>data.json（））
.然后（res=>res.name）
}

注意我是如何将

getCategory

移出并将

map

包装到它的

then

块中的。老实说，代码可能更干净，但只是为了展示它是如何工作的

---

至于为什么您的

fetch

返回

未定义的
，首先是因为您的
getCategory（id）
没有
返回任何内容。第二，这仅仅是因为JavaScript的异步本质如何，所以您的
const post
没有价值，因为
getCategory（id）
当时还没有完成。
参考@lyosha korogoda的答案，如果您不能使用
异步/await
，请尝试以下方法：

componentDidMount() {
  const URL = 'https://public-api.wordpress.com/wp/v2/sites/<YOUR_WORDPRESS_URL>/posts/';

  fetch(URL)
    .then(res => res.json())
    .then(posts => {
      this.getCategory(...post.categories).then(category => {
        const post = posts.map(post => {
          return {
            ...post,
            categories: category
          };
        });
        this.setState({ posts: post });
        console.log(post);
      })
    })
    .catch(err => console.log(err));
}

getCategory(id) {
  const URL = `https://public-api.wordpress.com/wp/v2/sites/<YOUR_WORDPRESS_URL>/categories/${id}`;

  return fetch(URL)
    .then(data => data.json())
    .then(res => res.name)
}

componentDidMount（）{
常量URL=https://public-api.wordpress.com/wp/v2/sites//posts/';
获取（URL）
.then（res=>res.json（））
。然后（posts=>{
this.getCategory（…post.categories）。然后（category=>{
const post=posts.map（post=>{
返回{
邮递
类别：类别
};
});
this.setState（{posts:post}）；
控制台日志（post）；
})
})
.catch（err=>console.log（err））；
}
getCategory（id）{
常量URL=`https://public-api.wordpress.com/wp/v2/sites//categories/${id}`；
返回获取（URL）
.then（data=>data.json（））
.然后（res=>res.name）
}

注意我是如何将
getCategory
移出并将
map
包装到它的
then
块中的。老实说，代码可能更干净，但只是为了展示它是如何工作的

至于为什么您的
fetch
返回
未定义的
，首先是因为您的
getCategory（id）
没有
返回任何内容。第二，这仅仅是因为JavaScript的异步性质，所以您的
const post
没有价值，因为
getCategory（id）
当时还没有完成。
一个可能的错误是您的
getCategory
需要一个id，但是你把所有的
post.categories
都分散在那里。它是一个数组，但只有一个值@LyoshaKorogodaOk，所以我注释掉了setState，并在getCategory（）函数中添加了return来获取。现在，我返回了一个值类别的承诺，但是当我调用时。然后在这个.getCategory（…post.categories）之后这仍然是一个承诺？请注意，
getCategory
没有
return
值，即使返回
fetch
，也返回了一个
promise
。另外，你可能想编辑掉你的URL。一个可能的错误是你的
getCategory
需要一个id，但是你在那里传播了所有的
post.categories
。它是一个数组，但是有一个值@LyoshaKorogodaOk，所以我注释掉了setState并在getCategory（）中添加了return来获取函数现在我返回值类别的承诺，但当我调用时。然后在此之后.getCategory（…post.categories）仍然是承诺？请注意，
getCategory
没有
return
值，即使返回
fetch
，也返回了
承诺。此外，您可能需要编辑您的URL