0

У меня есть компонент, в котором реднедерятся карточки с фотографиями. У каждой карточки есть функция удаления и редактирования фотографии введите сюда описание изображения

Код, отвечающий за список

      <DragDropContext onDragEnd={this.onDragEndCarousel}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              {carousel.map((item, index) => (
                <Draggable
                  key={item.id}
                  draggableId={item.id}
                  index={index}
                >
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
                      <SectionImage key={item.id} item={item} />
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>

Код внутри карточки

    <CardActions className={classes.actions} disableActionSpacing>
      <input
        accept="image/*"
        className={classes.input}
        style={{ display: "none" }}
        id="raised-button-file"
        multiple
        type="file"
        onChange={this.updatePhoto}
      />
      <label htmlFor="raised-button-file">
        <IconButton aria-label="Edit" component="span">
          <EditIcon />
        </IconButton>
      </label>
      <IconButton aria-label="Delete" onClick={this.deletePhoto}>
        <DeleteIcon />
      </IconButton>
    </CardActions>
    <CardMedia
      className={classes.media}
      image={item.content}
    />

Во время вызова метода this.updatePhoto у карточки выполняется запрос на бекенд, который загружает фотографию, сохраняет ссылку на фотографию в бд и возвращает список фотографий слайдера, после чего присваиваю данный список в хранилище redux:введите сюда описание изображения

, но он по какой-то причине не ререндерит карточки после обновления состояния, а вместо этого, независимо от того какую карточку я поменял, он у первой фотографии в списке просто убирает изображение:

введите сюда описание изображения

Я практически полностью потерялся в понимании почему так работает, особенно если учесть что при обновлении страницы фотография действительно обновляется:

введите сюда описание изображения

Я уже поломал голову от того почему так может происходить и абсолютно не понимаю в чем может быть проблема. Буду сильно благодарен любой помощи

1 ответ 1

0

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

.then(result => setTimeout(() => {
    res.status(200).json(result[section]);
}, 2000))

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.