渲染嵌套的 arrays 并仅通过显示键反应一次

Question

我有一个嵌套数组，我想用 JSX 代码渲染这个数组，这样像 array1 这样的键应该显示一次，文本应该显示为列表，然后使用下一个数组继续相同的循环。 我曾尝试使用 map function 和 for 循环，但未能成功。

sampleArray : [{"array1": [ {"text": "abc"},{"text": "def"}, {"text": "ghi"}],
               "array2":[{"text": "efg"}, {"text": "fgh"}]]

请建议我 map function 遍历此数组以呈现 JSX 代码。 谢谢

Answer 1

嘿，我不知道您是否在 object 中犯了错误，但这里有两个版本的此实现与您的 object 和我的更新：

忽略类型在 TypeScript

export const Test = ({ className }: Test) => {
  const sampleArray = [
    {
      array1: [{ text: 'abc' }, { text: 'def' }, { text: 'ghi' }],
      array2: [{ text: 'efg' }, { text: 'fgh' }],
    },
  ]

  const sampleArray2 = [
    {
      array1: [{ text: 'abc' }, { text: 'def' }, { text: 'ghi' }],
    },
    {
      array2: [{ text: 'efg' }, { text: 'fgh' }],
    },
  ]
  return (
    <>
      {/* YOUR VERSION */}
      <div>
        {Object.keys(sampleArray[0]).map((key) => {
          return (
            <div>
              <div id="title">{key}</div>
              {sampleArray[0].map((item) => {
                return <div>{item.text}</div>
              })}
            </div>
          )
        })}
      </div>
      {/* UPDATED VERSION */}
      <div>
        {sampleArray2.map((key) => {
          const title = Object.keys(key)[0]
          return (
            <div>
              <div id="title">{title}</div>
              {key[title].map((item) => {
                return <div>{item.text}</div>
              })}
            </div>
          )
        })}
      </div>
    </>
  )
}