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

Question

[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. С бэка приходить такая же последовательность, как и до этого. Такую же последовательность я оправляю на бэк. Сами записи в стейте местами не меняются. Не подскажите на что смотреть?

Answer 1

[Егор Живагин]

Смотреть, как у вас заполняется dropMysteryBoxes.editable[somekey]. value . Может вам их бэк не в том порядке возвращает? Вообще, в объектах не гарантированный порядок ключей, возможно придётся добавить сортировку после Object.entries

Comments

[uRoot]

Смотреть, как у вас заполняется dropMysteryBoxes.editable[somekey]. value . Может вам их бэк не в том порядке возвращает?

Не, порядок правильный

Вообще, в объектах не гарантированный порядок ключей, возможно придётся добавить сортировку после Object.entries

Просто есть похожие места. Там всё ок. В одном случае нет отправки на бэк, в другом - в объекте записей больше, он глубоковложенный.

[Егор Живагин]

uRoot, в теории, у вас вот здесь порядок ключей меняется, y вы всегда ставите последним ключом в объекте

editable: {
      ...prevState.editable,
      [y]: {
        ...prevState.editable[y],
        [x]: inputValue,
      }
    },

[uRoot]

Егор Живагин, окей, допустим. Но когда выполняется этот код, то изменения я вижу - убирается инпут, добавляется новое значение в таблицу. И когда я нажимаю на Сохранить, то выполняется этот код:

const onSave = useCallback(() => {
  setPending(true);
  setEdit(false);

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

И тогда порядок ломается.

[uRoot]

Егор Живагин, порешал. Было:

Object.entries(dropMysteryBoxes.editable).map(([key, value]) => { ... }

Стало:

Object.entries(dropMysteryBoxes.editable).sort().map(([key, value]) => { ... }