时间戳

首页 > 解决方案 > 试图在对象中打印数组，但不工作（reactjs）

node.js - 试图在对象中打印数组，但不工作（reactjs）

问题描述

我正在尝试在此对象中打印数组：

但是，这段代码不起作用：

{templates.map(item => { return <li>{item[0]}</li>; })}

标签： node.jsreactjs

解决方案

查看您正在使用的代码：item[0]，看起来您认为item是一个数组，并且您正在尝试获取数组中第一个元素的值。但是，查看对象，您可以看到它templates包含对象，而不是数组。所以，item[0]是未定义的。

这就引出了一个问题，当您说要“打印数组”时，您是什么意思？是否要打印代表每个对象的 JSON 字符串？

templates.map(item => <li>{JSON.stringify(item)}</li>)

或者您想在对象上打印唯一属性的值？

templates.map(item => <li>{item.Template_id}</li>)

这是一个工作示例，它打印数组Template_id中每个项目的属性：templates

const obj = {
  name: "After_Effects",
  templates: [
    { Template_id: "601071694b0146303c10d68c" },
    { Template_id: "601072e04b0146303c10d68d" },
    { Template_id: "601073114b0146303c10d68e" },
  ],
  __v: 0,
  _id: "60106addf83a155344bf3edb",
};
const listItems = obj.templates.map(item => <li>{item.Template_id}</li>);
ReactDOM.render(<ul>{listItems}</ul>, document.querySelector("main"));
li {
  list-style-type: none;
  font-family: monospace;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main></main>

推荐阅读