javascript - Pinterest API : Cannot access 'Metadata' object property,，即使其他属性可访问

Question

我正在使用 Pinterest API。我可以访问从响应返回的所有数据(元数据对象属性除外)。这是我获取 Pin 图数据的代码:

let boarddata = [];
axios
   .get(`PINTEREST_API_URL`)
   .then(
     function(response) {
       boarddata = response.data.data;
       console.log(response.data.data);
     }.bind(this)
   );

response.data.data[0]的Console.log:

0:
  id: "167899892346462055"
link: "https://www.pinterest.com/r/pin/167899892346462055/5073939286663940267/f1b6e174ab1a06c38171839b6712e3a30ca6f73f0ee7ca480a72f8fb416f6537"
note: " "
url: "https://www.pinterest.com/pin/167899892346462055/"
attribution: null
image:
  original: {
    url: "https://i.pinimg.com/originals/27/e4/d6/27e4d67ba04f011da678fdd0da8c1d1a.jpg",
    width: 713,
    height: 1024
  }
__proto__: Object
metadata:
  link: {
    title: "Berry French Toast Casserole (Make Ahead Overnight) - Joyous Apron",
    description: "This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!",
    favicon: "https://i.pinimg.com/favicons/5c0314c869b732323c11…64e959475480.ico?70361f3f8b1918702ceaa18bc4b74ebe",
    locale: "en",
    site_name: "Joyous Apron"
  }
article: {
  name: "Berry French Toast Casserole",
  description: "This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!",
  authors: Array(0),
  published_at: "2018-07-26T00:00:00"
}
recipe: {
  name: "Berry French Toast Casserole",
  servings: {…},
  ingredients: Array(6)
}
__proto__: Object
original_link: "http://www.joyousapron.com/berry-french-toast-casserole/#wprm-recipe-container-2578"
__proto__: Object

我想映射响应对象并提取数据，以便我可以在页面上构建用户引脚的显示。除了我最需要的元数据对象属性之外，我可以访问其他所有内容。这是我想要如何访问和使用对象数据的代码。

  showPins = boarddata => {
    let boardPins = this.state.boardPins;
    console.log(boarddata);
    boarddata.map((pin, index) => {
      const newPin = {
        id: pin.id,
        image: pin.image.original.url,
        name: pin.metadata.link.title,
        description:
          pin.metadata.article.description ||
          pin.metadata.link.description,
        ogLink: pin.original_link
      };
      boardPins.push(newPin);
    });
    this.setState({
      boardPins
    });
    console.log(this.state.boardPins);
  };

这将返回:

index.js:337 Uncaught (in promise) TypeError: Cannot read property 'title' of undefined
    at index.js:337
    at Array.map (<anonymous>)
    at t.a.showPins (index.js:333)
    at t.<anonymous> (index.js:316)

当我在执行 map 函数之前控制台记录我需要的属性时，它们会显示出来。 (见下文)

console.log(boarddata[0].image.original.url); //https://i.pinimg.com/originals/27/e4/d6/27e4d67ba04f011da678fdd0da8c1d1a.jpg
console.log(boarddata[0].id); //167899892346517912
console.log(boarddata[0].metadata.link.title); //Berry French Toast Casserole (Make Ahead Overnight) - Joyous Apron
console.log(boarddata[0].metadata.link.description); //This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!
console.log(boarddata[0].original_link); //http://www.joyousapron.com/berry-french-toast-casserole/#wprm-recipe-container-2578

如有任何建议，我们将不胜感激

Answer 1

实际上，未定义的不是 metadata 属性，而是 metadata 属性的 link 属性。您确定所有数据对象都相同吗？它们很可能不一致。似乎您只检查了响应数据的第一个元素(response.data.data[0] 和 boarddata[0])

要进一步检查这一点，请尝试以下操作:

showPins = boarddata => {
    let boardPins = this.state.boardPins;
    console.log(boarddata);
    boarddata.map((pin, index) => {
      console.log(`${index}: ${JSON.stringify(pin.metadata)}`);
      // ...
    });
    this.setState({
      boardPins
    });
    console.log(this.state.boardPins);
  };