其他组件中的对象数组，而不是列表中的映射。

Question

我正在映射从不同组件导入的对象数组，但是我得到了错误。

警告:列表中的每个孩子都应该有一个唯一的“键”道具。

具有下列错误详细信息

使用

检查顶层呈现调用。有关详细信息，请参阅https://reactjs.org/link/warning-keys。(webpack-内部:/pages/index.jsx:27:17) Layout (webpack-internal:///./components/Layout.jsx:16:19)，293e587d62412a$293e587d62412a$9f8ac96af4b1b2ae (/home/kimmoramicky/Desktop/fts_portfolio/node_modules/@react-aria/ssr/dist/main.js:42:28) at MyApp (webpack-内部:/pages/_app.tsx:28:18)在StyleRegistry (/ Home /kimmoramicky/Desktop/ Desktop/fts_portfolio/node_modules/styled-jsx/dist/index/index.js:671:34) at AppContainer (/home/kimmoramicky/Desktop/fts_portfolio/node_modules/next/dist/server/render.js:404:29) at AppContainerWithIsomorphicFiberStructure (/home/kimmoramicky/Desktop/fts_portfolio/node_modules/next/dist/server/render.js:433:57) at div at Body (/home/kimmoramicky/Desktop/fts_portfolio/node_modules/next/dist/server/render.js:690:21)

下面是包含数组Menu.jsx的组件

export const mainDetails = [
    {
        heading: 'CUSTOM SOFTWARE DEVELOPMENT',
        list: ['- Solutions tailored to specitic business needs', '- Domain experience', '- Technical excellence', '- Process visibility', '- Constraint management framework', '- Non-functional requirements match']
      },
      {
        heading: 'DEVELOPMENT TEAM AUGMENTATION',
        list: ['- Solutions tailored to specitic business needs', '- Domain experience', '- Technical excellence', '- Process visibility', '- Constraint management framework', '- Non-functional requirements match']
      },
      {
        heading: 'IT CONSULTING AND DIGITAL ADVISORY',
        list: ['- Solutions tailored to specitic business needs', '- Domain experience', '- Technical excellence', '- Process visibility', '- Constraint management framework', '- Non-functional requirements match']
      },
      {
        heading: 'SOFTWARE RE-ENGINEERING AND SUPPORT',
        list: ['- Solutions tailored to specitic business needs', '- Domain experience', '- Technical excellence', '- Process visibility', '- Constraint management framework', '- Non-functional requirements match']
      }
]

下面是包含数组Heading.jsx映射的组件

import React from 'react'
import Link from 'next/link'
import {mainDetails} from './Menus'

const Heading2 = () => {
  return (
    <main>
      {mainDetails.map(detail => (
        <div className="card">  
          <div className='done'>
            <div>
              <h5 className='font-normal pl-8 text-[#E54416] pb-4 text-lg'>{detail.heading}</h5>
              <ul>{detail.list.map(listItems=>(
                <li>{listItems}</li>
              ))}
              </ul>
            </div>
          </div>
      </div>
      ))}
      
      
    </main>
  )
}

export default Heading2

此外，当我将键支柱添加到列表中时(如这个<ul>{detail.list.map(listItems, i =>(<li key={i}>{listItems}</li>))} )，我会得到一个新的错误：listItems是未定义的

Answer 1

首先，从不使用数组索引为列表提供一个键：

每当修改列表时，使用key={index}的问题就会发生。React不理解添加/删除/重新排序的项目，因为每个呈现都根据数组中项的顺序给出了索引。虽然，通常它被渲染得很好，但是当它失败时，仍然会出现一些情况。

有关更多解释，请参见this SO question。

也就是说，对于第一个映射mainDetails.map()，您需要一个独特的键，而heading似乎是一个不错的选择。对于detail.list.map()，您还需要一个惟一的键，您可以通过将heading和listItems值合并在一起创建一个键，比如detail.heading + listItems

    <main>
      {mainDetails.map(detail => (
        <div key={detail.heading} className="card">  
          <div className='done'>
            <div>
              <h5 className='font-normal pl-8 text-[#E54416] pb-4 text-lg'>{detail.heading}</h5>
              <ul>{detail.list.map(listItems=>(
                <li key={detail.heading + listItems}>{listItems}</li>
              ))}
              </ul>
            </div>
          </div>
      </div>
      ))}      
    </main>