Question

我尝试使用带反应的WordPress API，但它返回id而不是标记名称，因此我尝试使用其他API调用来获取标记名称。但它一直未定义返回。当我在getCategory（）中获取之前添加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)
 }

Answer 1

基本上，您的问题是您在fetch结算getCategory之前设置了状态。为了解决这个问题，您可以等待其结果 -

componentDidMount() {
  const URL = 'https://public-api.wordpress.com/wp/v2/sites/sitename/posts/';  
  fetch(URL)
    .then(res => res.json())
    .then(posts => {
      return Promise.all(posts.map(async post => {
        return {
          ...post,
          categories: await this.getCategory(...post.categories)
        };
      }));
    })
    .then(posts => this.setState({ posts: posts }))
    .catch(err => console.log(err));
}

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

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

Answer 2

首先：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方法（可能）时，类别（getCategory）的http请求仍在运行，因此尚未设置类别。

在调用setState方法之前，应该使用Promise.all()方法确保所有http请求都已完成。

Answer 3

参考@ 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)
}

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

至于您的fetch返回undefined的原因，首先是因为getCategory(id)没有return任何内容。其次，它仅仅是因为JavaScript的异步性质，所以const post没有价值，因为getCategory(id)当时还没有结束。

在反应中获取返回undefined

3 个答案: