如何从映射对象中获取密钥

Question

我正在用下面的代码映射一些对象

<div className='groups'>
      {
                    groups.map(({id,...otherGroupProps}) => (
                        <GroupItem key={id}{...otherGroupProps}/>
                    ))
                }
      </div>

但是在 GroupItem 组件中，我无法访问 id，我尝试了以下代码：

const GroupItem = ({id,title}) => (
    <Link
      className='group-item'
      to={`/groups/${id}`}
    >
      <div className='content'>
      <h1 className='title'>{title}</h1>
      </div>
    </Link>
  );

标题很好，但 id 未定义，你能告诉我我错过了什么吗？

Answer 1

基本上你想要这样的东西：

<GroupItem key={id} id={id} title={otherGroupProps.title}/>

Answer 2

只要不是otherGroupProps就需要自己添加。

<GroupItem key={id} id={id} title={otherGroupProps.title}/>

映射时应该考虑的另一点是来自索引的 id 对静态内容有好处，而可以更改的列表对您传递的对象内的标识符更好