时间戳

首页 > 解决方案 > 在 REACT/JSX 中处理嵌套数组

javascript - 在 REACT/JSX 中处理嵌套数组

问题描述

所以我正在使用 gatsbyjs 并做出反应来构建一个网页。现在我有两个嵌套数组 A 和 B，它们都有两个子数组。

A = [['a'],['b']];
B = [['COQ', 'CCC'], ['CCCM', 'CK']];

我想在这样的网页上展示这两个数组：

组分A：

'a': 'COQ', 'CCC'

B组份：

'b': 'CCCM', 'CK'

我知道我可能应该使用 .map() 但我不太明白这一点。

我的代码：

import React from "react"

const Test = () => {
  const fileNames = [["a"], ["b"]]
  const test = [
    ["COQ", "CCC"],
    ["CCCM", "CK"],
  ]

  // function dispChem(p2, index) {
  //     return p2[index];
  // }
  
  return (
    <div>
      Hi
      <div>
        <ul>
          {fileNames.map((fileName, index) => (
            <div key={fileName}>
              <li>
                {fileName}
                {test.map((res, index) => (
                  <div key={index}>
                    {res}
                    {console.log(res)}
                    {console.log(index)}
                  </div>
                ))}
              </li>
            </div>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default Test

结果：

Hi
a
COQCCC
CCCMCK
b
COQCCC
CCCMCK

请帮忙！谢谢！

标签： javascriptarraysreactjs

解决方案

您可以使用从第一个.map()获得的索引从test. 然后你可以用.join()它把它变成一个字符串，你可以与fileName.

{fileNames.map((fileName, index) =>
  <div key={fileName}>
    <li>
      {`${fileName}: ${test[index].join(', ')}`}
    </li>
  </div>
)}

请参见下面的示例：

const Test = () => {
    const fileNames = [['a'], ['b']];
    const test = [['COQ', 'CCC'], ['CCCM', 'CK']];

    return (
        <div>
            Hi
            <div>
                <ul>
                    {fileNames.map((fileName, index) =>
                        <div key={fileName}>
                            <li>
                                {`${fileName}: ${test[index].join(', ')}`}
                            </li>
                        </div>


                    )}
                </ul>
            </div>
        </div>
    )
}

ReactDOM.render(<Test />, document.body);
<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>

推荐阅读