Задать вопрос
@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. С бэка приходить такая же последовательность, как и до этого. Такую же последовательность я оправляю на бэк. Сами записи в стейте местами не меняются. Не подскажите на что смотреть?
  • Вопрос задан
  • 39 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Смотреть, как у вас заполняется dropMysteryBoxes.editable[somekey]. value . Может вам их бэк не в том порядке возвращает? Вообще, в объектах не гарантированный порядок ключей, возможно придётся добавить сортировку после Object.entries
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы
07 дек. 2024, в 00:01
10000 руб./за проект
06 дек. 2024, в 23:57
4000 руб./за проект
06 дек. 2024, в 23:48
2000 руб./за проект