React中map遍历对象数组时comment.commenter_comment返回undefined问题

错误原因 #

你对map方法和对象属性访问的理解没有问题，问题出在数组构造逻辑上：
Object.values(props.post.comments_text) 执行后已经得到了结构如下的一维评论数组：

[
  {commenter_comment: 'k', commenter_handle: 'SHARK1', ...},
  {commenter_comment: 's', commenter_handle: 'SHARK1', ...},
  ...
]

你调用holder.push(上述数组)后，holder的实际结构变成了二维数组：

[
  [
    {commenter_comment: 'k', ...},
    {commenter_comment: 's', ...},
    ...
  ]
]

此时遍历holder拿到的第一个元素是整个评论数组，而不是单个评论对象，自然访问不到commenter_comment属性。

修复方案 #

直接遍历Object.values的返回结果即可，不需要额外用holder数组中转，优化后的代码如下：

import React from 'react';

export default function Comments(props) {
  if (props.post && props.post.comments_text) {
    const comments = Object.values(props.post.comments_text)
    return (
      <div>
        {comments.map((comment, index) => {
          return (
            <div key={index}>
               {comment.commenter_comment} 
            </div>
          )
        })}
      </div>
    )
  }
  return null;
}

提示：生产环境建议用评论的唯一uid作为key属性的值，代替上面的index，可以避免列表重渲染的性能问题和状态错乱问题。

内容的提问来源于stack exchange，提问作者Alex