React中如何通过Lodash Map访问Tweet对象的指定属性

我已经实现了将推文上传到React容器state的功能，点击按钮后系统会创建名为tweets的state，这是一个包含每条推文及其属性的数组，在React控制台里能看到这些属性都正常存在。现在我想知道怎么访问每条推文的属性（比如text属性），以下是我当前使用的map代码片段：

return _.map(tweets, (tweet) => { 
  return { 
    id: tweet.id_str, 
    createdAt: tweet.created_at, 
    text: ...
  }
});

嘿，你已经走在正确的路上啦！既然tweets是一个存储推文对象的数组，你在_.map里已经拿到了单个的tweet对象，访问它的text属性其实非常直接：

1. 直接在map中提取属性 #

你只需要把代码里的text: ...替换成text: tweet.text就可以了，完整代码如下：

return _.map(tweets, (tweet) => { 
  return { 
    id: tweet.id_str, 
    createdAt: tweet.created_at, 
    text: tweet.text // 直接访问推文的text属性
  }
});

2. 若要渲染到JSX中 #

要是你最终需要把推文内容渲染到页面上，可以在map里返回JSX元素，示例如下：

return _.map(tweets, (tweet) => (
  <div key={tweet.id_str} className="tweet-card">
    <span className="tweet-date">{tweet.created_at}</span>
    <p className="tweet-content">{tweet.text}</p>
  </div>
));

这里要注意给每个循环生成的元素加上唯一的key属性（用tweet.id_str就很合适），React依赖它来高效更新DOM结构。

小提醒 #

如果不确定属性名称是否正确，可以在map函数里加一句console.log(tweet)，在浏览器控制台里查看这个对象的所有属性，确保你使用的属性名和API返回的结构完全一致（比如有些场景下可能是full_text而非text）。

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