如何在JSX中映射数组的数组

白板笔

我有一个名称列表作为数组。然后将这些名称配对,放入我的App.js中的数组中

我想在这些上映射以创建一个<ul> containing <li>s,但我遇到了麻烦,任何帮助都将是惊人的,谢谢!

不幸的是,像这样的数组上的常规映射将不起作用...谢谢!

return (
    <ul>
      {pairs.map(pair => (
        <li key={pair}>{pair}</li>
      ))}
    </ul>
  );

<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>


createPairs() {
    const list = [...this.state.list];

    list.sort(() => 0.5 - Math.random());

    const pairs = [];


    while (list.length >= 2) {
      const pair = [list.pop(), list.pop()];

      pairs.push(pair);
    }

    this.setState({
      pairs
    });
  }

卡梅伦·利特尔

您可以参数中使用解构map来提取每对的成分。请记住将解构的参数括在括号中。

return (
  <ul>
    {pairs.map(([pair_1, pair_2]) => (
      <li key={pair_1}>{pair_1}</li>
    ))}
  </ul>
);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章