从React中的API对象提取数据

Question

我正在尝试从具有以下JSON输出的API检索数据，并且我有一个调用的函数。

我可以在console.log（users）中看到api输出，因此数据正在传递到函数中。

我试图输出包含在“数据”中的数组，但似乎无法访问数据。

{
  "dataCount": 2,
  "data": [
    {
      "name": "Test review header",
      "text": "This is  adescription for a test review",
      "img": "http://pngimg.com/upload/pigeon_PNG3423.png"
    },
    {
      "name": "Test review header2",
      "text": "This is  adescription for a test review2",
      "img": "http://pngimg.com/upload/pigeon_PNG3422.png"
    }
  ]
}

renderUsers() {

    const { users } = this.props;

    console.log(users);

    Object.keys(users).map(name => users[name])
        console.log(users[name]);
    };

Answer 1

您需要迭代的data出现在用户的data字段中。

使用lists ，必须指定key属性，以使React跟踪列表中的每个项目。

renderUsers() {
  const { users } = this.props;
  return (
    <ul>
     { 
        users.data.map(name => {
            <li key={name}>users[name]</li>
        }) 
     }
    </ul>
  )
}

Answer 2

首先，我不使用react，但是您想要的其他JavaScript框架应该是相同的。

您确定收到的是JSON吗？

我们需要确保您收到的是JSON对象，而不是普通文本。 假设您有一个函数parseResponse(data) 。 我们可以调用JSON.parse(data)将数据参数解析为json对象。 也有可能将结果存储在变量中。

使用JSON对象

当我们确定您已将参数解析为JSON对象时，就可以获取它的数据。 例如，如果要获取数据中第一个对象的名称，则可以调用： parsedJson.data[0].name其中parsedJson是JSON.parse(data)的结果，data是对象中数组的对象JSON， 0是数组中的第一个对象

然后，您可能具有这种功能：

function parseResponse(data) {
  var parsedJson = JSON.parse(data);
  for(var i = 0; i < parsedJson.data.length; i++) {
      console.log(parsedJson.data[i].name);
  }
}

见jsfiddle