在 ReactJs 中渲染一个对象数组答案

【问题标题】：Render an array of Objects in ReactJs在 ReactJs 中渲染一个对象数组
【发布时间】：2017-07-13 11:08:20
【问题描述】：

我正在尝试遍历对象属性（本示例中的名称）并将它们列在函数的简单循环中。我发现了一些非常尴尬的方法，但它似乎不正确。

这是我得到的：

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const a = props.numbers;
  return (
    <ul>
      {a.map((number) =>
        <ListItem  value={ItemsToSell[number].Name} />
      )}
    </ul>
  );
}

const numbers = [0,1, 2];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

有没有更好的方法来做到这一点？我只需要一个循环来遍历对象数组，列出所需的属性并创建多个 html 节点之一。

【问题讨论】：

标签： javascript reactjs babeljs

【解决方案1】：

你可以简单地映射ItemsToSell数组

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  return (
    <ul>
      {ItemsToSell.map((obj, index) =>
        <ListItem  key={index} value={obj.Name} />
      )}
    </ul>
  );
}

ReactDOM.render(
  <NumberList  />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案2】：

为什么不遍历ItemsToSell 数组？您不必再添加一个。

注意：在循环元素时包含key属性，否则会收到错误消息。

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  return (
    <ul>
      {ItemsToSell.map((elem, index) =>
        <ListItem value={elem.Name} key={index} />
      )}
    </ul>
  );
}

ReactDOM.render(
  <NumberList />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

非常感谢！这正是我所需要的。