ReactJs如何呈现关联数组的对值答案

【问题标题】：ReactJs how to render pair-value of assoc arrayReactJs如何呈现关联数组的对值
【发布时间】：2018-10-14 19:58:15
【问题描述】：

如何渲染关联数组的对值？我有关联数组：

let data = ["foo": 3, "bar": 5, "baz": 6];

我需要在我的组件中渲染它。我尝试这样的事情：

let content = data.map((value, index) => {
  return (
    <div key={index}}>
      {index}: {value}
    </div>
  );
});

但它不起作用。

【问题讨论】：

let data = ["foo": 3, "bar": 5, "baz": 6]; 这有效吗？
这不是一个有效的数组！
javascript中不存在关联数组

标签： javascript arrays reactjs

【解决方案1】：

如果您有一个对象，并且想要迭代该对象的键和值，请使用Object.entries() 获取键/值对数组。使用 Array.map() 迭代对数组，并使用 destructuring assignment 获取键 (k) 和值 (v)：

const data = { foo: 3, bar: 5, baz: 6 };

const Example = ({ data }) =>
  Object.entries(data).map(([k, v]) => (
    <div key={k}>
      {k}: {v}
    </div>
  ));

ReactDOM.render(
  <Example data={data} />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>

【讨论】：

【解决方案2】：

这不是一个有效的数组。从外观上看，您需要一个对象：

let data = {foo: 3, bar: 5, baz: 6};

你可以这样做：

let content = Object.keys(data).map(key => {
  return (
    <div key={key}>
      {`${key}: ${data[key]}`}
    </div>
  );
});

演示

class App extends React.Component {
  render() {
    let data = {foo: 3, bar: 5, baz: 6};
    let content = Object.keys(data).map(key => {
      return (
        <div key={key}>
          {`${key}: ${data[key]}`}
        </div>
      );
    });
    return <div>{content}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

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

【讨论】：

【解决方案3】：

let data = [{"foo": 3}, {"bar": 5}, {"baz": 6}];

  const content1 = data.map((value, index) => {
      return (
        <div key={index}>
          {index}: {JSON.stringify(value)}
        </div>
      );
    });

  const content2 = data.map((value, index) => {
      return (
        <div key={index}>
          {Object.keys(value)[0]}: {Object.values(value)[0]}
        </div>
      );
    });

输出1

0: {"foo":3}
1: {"bar":5}
2: {"baz":6}

输出2

 foo: 3
 bar: 5
 baz: 6

【讨论】：

【解决方案4】：

有多种方法可以做到这一点。一种方法可能是

    const data = { foo: 3, bar: 5, baz: 6 };
    createList() { 
        let items=[];
        for (const [index, value] of Object.entries(data)) {
            items.push(<div key={index}}>{index}: {value}</div>)
        }
        return items;    
    }
    render ( {this.createList();} )

【讨论】：