为什么在React中关键错误递归组件

Question

我正在尝试递归组件，但React关键道具在root中重复 使用UUID时，很好。我不知道原因，请帮助我

// filterModal.jsx
<FilterGroupCollection
            parentFiltergroup={parentFiltergroup}
            setParentFilterGroup={setParentFilterGroup}
            name='a'
/>

{parentFiltergroup.groups?.map((group, idx) => (
          <FilterGroupCollection
            key={name}
            parentFiltergroup={group}
            setParentFilterGroup={setParentFilterGroup}
            name={`${name}-${idx + 1}`}
          />
        ))}

在此处输入图像描述

Answer 1

看起来您正在使用相同的值为密钥支柱，这就是为什么您在控制台中获得键重复错误的原因。理想情况下，您应该为每个组件使用一个唯一的密钥，并且该密钥可能是您从每个组获得的唯一ID。类似的事情：

{parentFiltergroup.groups?.map((group, idx) => (
 <FilterGroupCollection
   key={group.id} //notice here the id that you should get from each group
   parentFiltergroup={group}
   setParentFilterGroup={setParentFilterGroup}
   name={`${name}-${idx + 1}`}
 />
))}

另外，如果您在每个组内没有任何独特的价值，则可以将 idx 用作关键，但这不是React解释的好习惯：

如果项目的顺序可能会更改，我们不建议将索引用于键。这可能会对性能产生负面影响，并可能引起组件状态的问题。

文档： https://reaectjs.s.org/docs/docs/docs/lists-and-lists-and-keys。 html＃键