在 REACT/JSX 中處理嵌套的 arrays

Question

所以我正在使用 gatsbyjs 並做出反應來構建網頁。 現在我有兩個嵌套的 arrays A 和 B，它們都有兩個子數組。

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

我想在這樣的網頁上展示這兩個 arrays：

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

請幫忙！ 謝謝！

Answer 1

您可以使用從第一個.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>

Answer 2

可以把2個arrays轉成1個object。

 const fileNames = [['a'], ['b']]; const test = [['COQ', 'CCC'], ['CCCM', 'CK']]; const newFiles = fileNames.map((f, index)=>{ //console.log(f, index); return {[f]:test[index]}; }); console.log(newFiles);