Reactjs 使用不同的键映射React组件

我想加载组件，但它显示了一个问题，即组件具有相同的键，但我映射到selectedGroups，并在第一个版本发布之前将gr.id作为键

sharingTabs = selectedGroups.map(gr => (
        <ExpansionPanel>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <Typography className={classes.heading}>{gr.name}</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Grid container spacing={16}>
              <Grid item xs>
                <SharingSpacesTabs />
              </Grid>
            </Grid>
          </ExpansionPanelDetails>
        </ExpansionPanel>
      ));

sharingTabs=selectedGroups.map（gr=>(
{gr.name}
));

但后来我想用一个道具发送索引，这就是为什么我在地图中添加了另一个地图，这就是导致回调函数问题的原因，我同意返回

sharingTabs = selectedGroups.map(function(gr) {
        const indexs = groups.map((group, index) => {
          if ((group.sharingspace.element = gr.id)) {
            return index;
          }
        });
        return (
          <ExpansionPanel key={gr.id}>
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
              <Typography className={classes.heading}>{gr.name}</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
              <Grid container spacing={16}>
                <Grid item xs>
                  <SharingSpacesTabs id={gr.id} index={indexs[0]} />
                </Grid>
              </Grid>
            </ExpansionPanelDetails>
          </ExpansionPanel>
        );
      });

sharingTabs=selectedGroups.map（函数（gr））{
const index=groups.map（（组，索引）=>{
if（（group.sharingspace.element=gr.id））{
收益指数；
}
});
返回(
{gr.name}
);
});

---

你能帮我找到一个解决方案吗？我需要它，谢谢你。最好的方法是将第二个

索引作为map中的第二个参数传递，并使
键={index}

 sharingTabs = selectedGroups.map((gr, index) => {
  const indexes = groups.map((group, index) => {
    if ((group.sharingspace.element = gr.id)) {
      return index;
    }
  });
  return (
    <ExpansionPanel key={index}>
      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
        <Typography className={classes.heading}>{gr.name}</Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        <Grid container spacing={16}>
          <Grid item xs>
            <SharingSpacesTabs id={gr.id} index={indexes[0]} />
          </Grid>
        </Grid>
      </ExpansionPanelDetails>
    </ExpansionPanel>
  );
});

sharingTabs=selectedGroups.map（（gr，索引）=>{
常量索引=组。映射（（组，索引）=>{
if（（group.sharingspace.element=gr.id））{
收益指数；
}
});
返回(
{gr.name}
);
});
我认为您的条件有问题，请更改函数条件以正确检查==或==的等式

此外，我不确定如果条件不满足，您想做什么，map将为每个不满足条件的元素返回null

 const indexs = groups.map((group, index) => {
          if ((group.sharingspace.element == gr.id)) {
            return index;
          }
        });

它不起作用它显示了相同的问题警告：遇到两个具有相同密钥的子项，
xxxxxxxx
。键应该是唯一的，以便组件在更新期间保持其标识。非唯一键可能会导致子项被复制和/或忽略-该行为不受支持，并可能在将来的版本中发生更改。但我需要在道具中获取组的索引，而不是第二个代码中显示的SelectedGroup。这就是我添加第二个映射的原因。好的，我刚刚添加了，请稍后重试。问题仍然是相同的警告：遇到两个具有相同密钥的子项，请显示错误