“警告：列表中的每个子项在 React (TypeScript) 中都应该有一个唯一的“键”道具”

Question

在 React (TypeScript) 中我得到：

警告：列表中的每个孩子都应该有一个唯一的“key”道具。查看 MyCollection的渲染方法

这是MyCollection：

export default function MyCollection(props:any ) {
  let nodes = useSelector((state: any) => state.vpms.norm.nodes);
  // let node = useSelector((state: any) => state.vpms.norm.nodes[props.id]);
  const groupListAdapter: GroupListAdapter = useGroupList(props);
  let items: any = [];
  groupListAdapter.itemsIds().forEach((itemId:any) => {items.push(nodes[itemId])});

  return (
    <>
      {items.map(props.render)}
    </>
  );
}

这就是它在父组件中的调用方式：

export default function App() {
...

const id = (node: any, name: string) => nodes[node.c[name]].id;

return (
{iter(root, 'persons').map((persons: any, index: number) => { return (
<MyCollection id={id(persons, 'coverages')} 
    render= {(coverages: any, index: number) => (
        <Accordion id={coverages.id} isExpanded={true}  >
        <Grid columns={4} style={{width: "100%"}} >
         ....../>
...
)

如何获得唯一密钥以避免出现此警告？请注意，App 中的 id 属性是 MyCollection 中所有 items 的单个 id。

Answer 1

这样映射的时候可以得到item的索引

yourArray.map((item, itemIndex) => <SomeComponent key={itemIndex} />);

虽然您确实应该为每个项目设置一个唯一标识符。因为它在 React 中被视为反模式。

更多信息在这里：

• https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/

• https://medium.com/@muesingb/why-you-shouldnt-use-index-as-the-unique-identifier-of-a-component-in-react-b20c3bfcb786

• https://stackoverflow.com/a/52338203/14575901

• https://medium.com/@vraa/why-using-an-index-as-key-in-react-is-probably-a-bad-idea-7543de68b17c

Answer 2

您可以在映射时使用索引作为键：

list.map((item,index)=>{
return (
<p key={index}>Samle Text</p>
)
})