Задать вопрос
@uroot

Почему нарушается последовательность вывода записей из списка при рендере?

Я рендерю список:
{!isPending && Object.entries(dropMysteryBoxes.editable).map(([key, value]) =>
  Object.entries(value).map(([quality, value]) =>
    <TableRow key={quality}>
      <TableCell className={classnames(globalClass.uppercase, tableClass.lighterCell)}>
        {quality}
      </TableCell>

      <ChancesTableCell
        editedField={editedField}
        isEdit={isEdit}
        coords={{y: key, x: quality}}
        columnValue={value}
        onChangeValue={onChangeValue}
        setEditedField={setEditedField}
        originalData={dropMysteryBoxes.saved}
        onBlur={onBlurInput}
      />
    </TableRow>
))}


Тут логика такая. Я кликаю на запись в таблице - появляется инпут и я могу конкретную запись отредактировать. Код:
const onChangeValue = useCallback((inputValue: number, x: string, y: string) => {
  setDropMysteryBoxes(prevState => ({
    ...prevState,
    editable: {
      ...prevState.editable,
      [y]: {
        ...prevState.editable[y],
        [x]: inputValue,
      }
    },
  }));
}, [editedField]);

После того как я нажимаю на копку сохранить, я записи отправляю на бэк:
const onSave = useCallback(() => {
  setPending(true);
  setEdit(false);

  API.update(dropMysteryBoxes.editable)
    .then(({ data }) => {
      setDropMysteryBoxes({
        editable: data,
        saved: data,
      });
    })
    .catch(onError)
    .finally(() => setPending(false));
}, [dropMysteryBoxes]);


И вот тут начинается самое интересное - вывод записей в самом первом коде, который я скинул, нарушается. Если из бэка приходить А (эта запись была отредактирована) B C, то при его выводе буде B C A. С бэка приходить такая же последовательность, как и до этого. Такую же последовательность я оправляю на бэк. Сами записи в стейте местами не меняются. Не подскажите на что смотреть?
  • Вопрос задан
  • 40 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Смотреть, как у вас заполняется dropMysteryBoxes.editable[somekey]. value . Может вам их бэк не в том порядке возвращает? Вообще, в объектах не гарантированный порядок ключей, возможно придётся добавить сортировку после Object.entries
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽