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

Posted 2023-02-22

【中文标题】如何在 JSX 中映射数组的数组

【英文标题】：How to map over arrays of arrays in JSX

【发布时间】：2020-07-13 07:17:17

【问题描述】：

我有一个名称列表作为数组。然后将这些名称配对到我的 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
    );
  

【问题讨论】：

一件重要的事情，你想如何在列表中显示成对的名字？

所以这将是每对中每个人的名字。例如。 this.state.pairs ? null : console.log(this.state.pairs) ( this.state.pairs.map(pairs => ( 对人 1 对人 2 )) )

【参考方案1】：

您可以在 map 参数中使用 destructuring 来提取每对的组件。记得将解构的参数用括号括起来。

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