Блог

Я создаю приложение emojipedia, в котором, как ожидается, при нажатии на эмодзи откроется модал, содержащий описание эмодзи. Насколько я знаю, для этого мне нужно сопоставить описание(содержащееся в emojipedia.js файле) эмодзи с EmojiContainer компонентом в Components папке.

Здесь возникает моя проблема, когда, когда я нажимаю на смайлик, он зависает. Почему это происходит и как это исправить???

заранее спасибо.

Вы используете одно включенное состояние EmojiContainer для управления всеми модальностями в вашем списке смайликов. Как следствие, когда вы пытаетесь открыть модал, открываются все модалы. Лучшим вариантом было бы инкапсулировать всю логику относительно одного модального значения в отдельный многоразовый компонент:

 export default function Emoji({ item }) {
  const [open, setOpen] = useState(false);
  return (
    <Grid item lg={2} md={3} xs={6}>
      <ImageButton onClick={() => setOpen(true)}>
        <CardMedia
          sx={{
            "amp;:hover": {
              transform: "scale(1.3)"
            }
          }}
          component="img"
          height="100"
          image={item.link}
          alt="emoji"
        />
      </ImageButton>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Typography sx={style} variant="p">
          {item.desc}
        </Typography>
      </Modal>
    </Grid>
  );
}
 

Как вы видите, этот компонент имеет свое собственное состояние и управляет своим собственным модальным значением. В вашем смайликонтейнере вы можете использовать его следующим образом:

 export default function EmojiContainer() {
  return (
    <Grid>
      {emojipedia.map((item, index) => (
        <Grid key={index} container>
          <Emoji item={item} />
        </Grid>
      ))}
    </Grid>
  );
}
 

Из того, что я вижу, вам также нужно будет настроить модальный стиль. Вот обновленный codesandbox