Сопоставить компонент React с разными ключами

Question

Я хочу загрузить компоненты, но это показывает, что компоненты с тем же ключом, но я сопоставил на 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(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>
        );
      });

Не могли бы вы помочь мне найти решение, которое мне нужно, и спасибо

Answer 1

Я думаю, что у вас есть проблема в вашем состоянии. Измените условие вашей функции, чтобы правильно проверить равенство с == или ===.

Также я не уверен, что вы хотите сделать, если условие не будетУдовлетворенный, карта будет возвращать ноль для каждого элемента, который не удовлетворяет условию.

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

Answer 2

лучший способ сделать это - передать второй index в качестве второго параметра на карте и сделать key={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>
  );
});