如何映射 JSX 中的數組數組

Question

我有一個名稱列表作為數組。 然后將這些名稱配對到我的 App.js 中的一個數組中

我正在尋找映射這些以創建一個<ul> containing <li>的<ul> containing <li>並且我被卡住了，任何幫助都會很棒，謝謝！

不幸的是，像這樣的數組上的常規映射不起作用......謝謝！

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 }); }

Answer 1

您可以潛在地在map參數中使用解構來提取每對的組件。 請記住將解構的參數括在括號中。

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