lodash反应路由器事件键

Question

我正在尝试使用 lodash 创建一组链接，以便可以轻松更改它们。

  {_.map(leftItems, item => (
    <Menu.Item>
      <Link {...item} eventKey={{ ...item.eventkey }} />{' '}
    </Menu.Item>
      ))}

然后我用这个 JSON 把物品带进来

const leftItems = [
  {
    content: 'Component1',
    key: 'component1',
    eventkey: 1,
    to: '/component1',
    className: 'left'
  },
  {
    content: 'Component2',
    key: 'component2',
    eventkey: 2,
    to: '/component2',
    className: 'left'
  },
  {
    content: 'Component3',
    key: 'component3',
    eventkey: 3,
    to: '/component3',
    className: 'left'
  },
  {
    content: 'Component4',
    key: 'component4',
    eventkey: 4,
    to: '/component4',
    className: 'left'
  }
];

我在摆脱这些错误时遇到了问题：

index.js:2178 警告：数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。

index.js:2178 警告：React 无法识别 DOM 元素上的 eventKey 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 eventkey。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

Answer 1

你需要把唯一键放在<Menu.Item>上，即：

{_.map(leftItems, item => (
    <Menu.Item key={item.eventkey}>
      <Link {...item} />{' '}
    </Menu.Item>
))}

eventKey={{ ...item.eventkey }} 是不必要的，因为您的扩展运算符 {...item} 暗示了它