如何处理对象数组？我有一个包含 3 个对象的数组，其中包含来自我的数据库的 JSON 数据答案

【问题标题】：How to deal with array of objects? I have an array with 3 objects containing JSON data from my db如何处理对象数组？我有一个包含 3 个对象的数组，其中包含来自我的数据库的 JSON 数据
【发布时间】：2016-01-02 21:44:29
【问题描述】：

基本上，我有一个 posts 数组，其中包含 3 个对象：posts[{},{},{}]

每个对象看起来像这样：

1: Object
__v: 0
_id: "5686e17fc64feafd4486f22c"
created_at: "2016-01-01T20:28:47.889Z"
image: "Test"
message: "Test"
title: "Test Post 1"
updated_at: "2016-01-01T20:28:47.889Z"

我想知道如何获取每个对象的索引或其他内容，同时将其用于对象的属性。

我之前在测试一个对象对象，我所要做的就是：Object.keys(this.props.data).map(this.renderPostTile)。然后我可以只为renderPostTile(key) 使用一个参数。

当我有一个对象数组时，我该如何做类似的事情？

【问题讨论】：

谢谢。但是，我怎样才能做类似于 Object.keys(data).map(someFunction) 的事情？我正在尝试使用标题呈现
，但不知道该怎么做。
posts.map(function(post) {...})
不幸的是，当我这样做时，它说 .map 不是函数。这是我正在做的事情：{postData.map(this.renderTitle)} 以上我已将 postData 定义为 this.props.data。
当您说您的数组名为“posts”时，为什么要在“postData”上调用它？为什么要用大括号括起来？这只是一个函数调用。 posts.map(this.renderTitle);
对不起，我有一个 var postData = this.props.posts 很抱歉造成混乱

标签： javascript arrays json reactjs

【解决方案1】：

像这样：

var posts = [
  { title: "Test Post 1" },
  { title: "Test Post 2" },
  { title: "Test Post 3" }
];

posts.map(function(post){
  var p = document.createElement("p"),
      t = document.createTextNode(post.title);
  p.appendChild(t);
  document.body.appendChild(p);
});

显然你的对象更复杂，但你明白了。

编辑：

在反应方面，你可以这样做：

var PostListRender = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.posts.map(function(post){
          return <li>{post.title}</li>;
        })}
      </ul>
    )
  }
});

var posts = [
  {title: "Test Post 1"}, 
  {title: "Test Post 2"}, 
  {title: "Test Post 3"}
];

var el = document.getElementById('post-container');
React.render( < PostListRender posts = {posts} />, el);

Demo

【讨论】：

谢谢杰克。但是，这里是问题。我正在执行以下操作：renderPostTile(key) { return ( <PostTile key={key} index={key} postData={this.props.posts[key]} /> ); } render() { var postData = this.props.posts; return ( <div className="container"> <div className="row"> {postData.map(this.renderPostTile)} </div> </div> ); } 不幸的是，我收到错误消息 TypeError: postData.map is not a function
天啊。如何编辑代码以使其在评论中看起来不错？这是在一个pastebin中。 pastebin.com/hdiq9k4t
看起来您只是混淆了postData 和posts，但还有其他问题。您将不得不更新问题，因为您提出的问题已经得到解答，如果您仍然有问题，它们是不同的问题。
嗨，杰克。再过 90 分钟，我无法创建另一个帖子。基本上，我认为问题在于重新加载时，this.props.posts 由于某种原因再次为空。这导致了所有这些问题。由于它为null，不能使用.map()，我什至不能输出标题等。

【解决方案2】：

Object.keys 返回一个数组，这就是为什么你可以在它上面做.map()，这是一个数组方法。所以是的，您可以在阵列上使用地图。从字面上看，只需致电posts.map(myCallback);

您实际上是在将对象的键转换为数组的地方，以便在其上使用数组方法并询问“我也可以对数组执行此操作吗？” 答案“嗯...当然，您不必先将其转换为任何东西...只需调用 Array 的 .map 方法”。

你一直说它说postData.map 不是一个函数......但你说你的数组被命名为posts......所以它会是posts.map。如果您正在使用的任何东西都没有 map 方法，那么它就不是 Array （至少在现代浏览器中）。确保你在 Array 上调用它。

【讨论】：

谢谢。你能看看我的第一篇文章吗？我更新了 console.log(this.props.post) 的截图
@user1354934 - 我不知道反应（你真的应该说这就是你从一开始就在处理的事情）。我所知道的是，一个符合现代标准的 JS 引擎将在任何数组上都有一个 .map() 方法。如果您的“数组”没有它，那么您应该仔细检查您实际上是否在该位置引用了一个数组。请记住，this 可以根据函数调用者引用不同的内容...因此请检查代码中的那个位置，您得到的实际上是否是您期望的数组。