如何在 React 中渲染对象数组？

Question

能否请您告诉我如何在 React js 中呈现列表。 我喜欢这个

https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview

class First extends React.Component {
  constructor (props){
    super(props);

  }

  render() {
     const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;
    
    return (
      <div>
      hello
      </div>
    );
  }
} 

Answer 1

您可以通过两种方式做到这一点：

第一：

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

二：直接在return中写map函数

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }

Answer 2

https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

您可以将任何 JavaScript 表达式作为子表达式传递，方法是将其包含在 {} 中。例如，这些表达式是等价的：

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

这对于呈现任意长度的 JSX 表达式列表通常很有用。例如，这会呈现一个 HTML 列表：

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

---

class First extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{name: 'bob'}, {name: 'chris'}],
    };
  }
  
  render() {
    return (
      <ul>
        {this.state.data.map(d => <li key={d.name}>{d.name}</li>)}
      </ul>
    );
  }
}

ReactDOM.render(
  <First />,
  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>

Answer 3

Shubham 的回答很好地解释了。这个答案是对它的补充，以避免一些陷阱并重构为更易读的语法

陷阱：在渲染对象数组时存在常见的误解，尤其是在对数据执行更新或删除操作时。用例就像从表行中删除一个项目。有时，当预期被删除的行没有被删除，而是其他行被删除时。

要避免这种情况，请在根元素中使用 key 属性，该属性在 .map() 的 JSX 树中循环。此外，添加 React 的 Fragment 将避免在通过调用方法呈现时在 ul 和 li 之间添加另一个元素。

state = {
    userData: [
        { id: '1', name: 'Joe', user_type: 'Developer' },
        { id: '2', name: 'Hill', user_type: 'Designer' }
    ]
};

deleteUser = id => {
    // delete operation to remove item
};

renderItems = () => {
    const data = this.state.userData;

    const mapRows = data.map((item, index) => (
        <Fragment key={item.id}>
            <li>
                {/* Passing unique value to 'key' prop, eases process for virtual DOM to remove specific element and update HTML tree  */}
                <span>Name : {item.name}</span>
                <span>User Type: {item.user_type}</span>
                <button onClick={() => this.deleteUser(item.id)}>
                    Delete User
                </button>
            </li>
        </Fragment>
    ));
    return mapRows;
};

render() {
    return <ul>{this.renderItems()}</ul>;
}

重要：决定使用哪个值我们应该传递给key 属性也很重要，因为常见的方法是使用.map() 提供的index 参数。

TLDR;但是它有一个缺点并尽可能避免它并使用来自正在迭代的数据的任何唯一id，例如item.id。有一篇很好的文章 - https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318