React.js: как сгенерировать ключ при создании оптимистического создания?

Question

Работа с React.js действительно приятна.

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

Вы можете добавлять, редактировать и удалять комментарии. Они вытягиваются через GET каждые 10 секунд.

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

Поскольку комментарии являются частью списка, React предлагает назначить уникальный ключ для каждого комментария.

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

Однако в случае операции создания я не знаю идентификатор базы данных комментария до тех пор, пока он не был фактически создан на стороне сервера, и поэтому я не знаю, какое значение назначить ключу.

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

Могу ли я обойти это?

Answer 1

Вы можете добавлять, редактировать и удалять комментарии. Они вытягиваются через GET каждые 10 секунд.

Мы всегда POST к ресурсу, который в результате возвращает ответ JSON, содержащий данные, которые нам нужны, в вашем идентификаторе вашего дела. Задержка составляет до ~ 100 мс, что хорошо.

Если вы установили временный идентификатор, который не равен той, что будет предоставлена ​​одной базой данных, React повторит визуализацию снова после получения новых данных, только вы увидите два одинаковых элемента, так как ключ не совпадает.

Answer 2

Вам нужны ключи, которые являются уникальными, согласованными и доступными. Идентификаторы базы данных не могут предоставить третье требование, но вы можете - использовать локальные «идентификаторы клиентов». Очевидно, вы несете ответственность за их уникальность и последовательность.

Answer 3

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

Несмотря на то, что оптимистичный элемент может быть удален и повторно добавлен, вы можете не беспокоиться, он может упростить ваш CSS при использовании анимации включения или включения в вашем списке. Это также помогает, когда у вас есть компоненты списка элементов состояния.

Пример:

let tempIds = 1; // 1 and up are truthy 

// where ever you add the new item to your list 
const newList = [...list, {...newItem, tempId: tempIds++}]; 

// get the right id 
function getKey(instance) { 
    if (instance.tempId) { 
    return instance.tempId; 
    } else { 
    return instance.id; 
    } 
} 

// in your list render function 
<List> 
    {list.map(model => (
    <Item 
     key={getKey(model)} 
     //other props go here 
    /> 
))} 
</List