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警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;丙

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}

暗示了这一点

lodash反应路由器eventKey

1 个答案: