Как добавить ключ каждому элементу списка в React?

Question

[Iliya V. Soldatkin]

Помогите разобраться с взаимодействием с ключами React. Я передаю в функцию ключ uuid(). Но этот ключ - ключ всего списка (массив с объектами), а я хочу, чтобы в каждом объекте этого массива находился такой уникальный ключ. Код компонента здесь: https://codepen.io/iliyasold/pen/oNoZKov Что я не понимаю здесь? Как это победить?

Сейчас я получаю это:

Answer 1

[insighter]

Ключ должен быть естественным, например Id сущности (в вашем случае комментария) из БД. Если его нет, то не мучайтесь и используйте порядковый номер элемента, как у вас и написано.
Удалять элемент (removeCommentItem) можно и по индексу.

Comments

[Iliya V. Soldatkin]

Понял, благодарю Вас. То есть, получается, что uuid я делаю чисто для React как бы, верно?

[insighter]

Iliya V. Soldatkin, немного не понял ваше предложение,

смотрите, если быть дотошным то надо было сделать так

return <CommentItem
                        key={uuid(i)} 
...
                        removeItem={() => removeCommentItem(i)} 
                    />

По части ключей почитайте для чего это вообще нужно https://ru.reactjs.org/docs/reconciliation.html#re.... Будет вопрос задайте здесь, я отвечу. Но в первую очередь нужно знать основы DOM, лучше поразбирайтесь с ними, а потом изучайте Реакт.

И да, в офиц. документации, есть предупреждение, что лучше не использовать индекс в качестве ключа, но в вашем примере и так этого ключа нет. В случае использовании uuid вы убиваете всю оптимизацию вообще.

[Iliya V. Soldatkin]

insighter, хорошо, почитаю, спасибо, а о какой оптимизации идёт речь здесь: "В случае использовании uuid вы убиваете всю оптимизацию вообще."?

[insighter]

Iliya V. Soldatkin, немного ввел вас в заблуждение, особо не влияет эта строчка

[Iliya V. Soldatkin]

insighter, подскажите, пожалуйста ещё вот какой момент. Я добавил ID к элементам и теперь из массива comments с помощью filter я убираю элементы, по которым кликнул. Если я правильно понимаю, React при этом не станет отрисовывать новый список, так как старый остался неизменным.

Вопрос такой: каким образом данные нового массива newListItem передать в state?

Я пробовал изменить state, добавив в функцию removeCommentItem const [items, setItems] = useState([]); и затем setItems(newListItem), но так ничего не выходит. К тому же, initialstate не пустой получается уже, раз в списке есть элементы. Как это всё записать? Какой тут принцип? Благодарю.

Текущий код компонента:

import CommentItem from './CommentItem';

function CommentList(props) {
    const {comments} = props;

    function removeCommentItem(itemId) {
        const newListItem = comments.filter(item => item.itemId !== itemId);

        console.log(newListItem)
    }

    return (
        <ul className="CommentList list">
            <h2 className="second-title CommentList-title">Все комментарии</h2>

            {comments.map((comment) => {
                    return <CommentItem
                        key={comment.itemId}
                        userName={comment.userName}
                        commentText={comment.commentText}
                        currentDate={comment.currentDate}
                        currentTime={comment.currentTime}
                        removeItem={() => removeCommentItem(comment.itemId)}
                    />
                }
            )}
        </ul>
    )
}

export default CommentList;

[insighter]

Iliya V. Soldatkin, нужно формировать новый массив. В него копируете всё кроме элемента который удаляете.
Добро пожаловать в мир иммутабельных коллекций.

PS возможно придется переделать логику работы компонента

[Iliya V. Soldatkin]

insighter, а разве он не сформирован - newListItem?

[insighter]

Iliya V. Soldatkin, вообще куда комментарии будут деваться после удаления, у вас просто учебный пример? Мне проще уже написать свою реализацию :)

[Iliya V. Soldatkin]

insighter, учебный, да, я его пытаюсь освоить, реакт, то бишь) Так они же деваются в newListItem, разве нет?

[insighter]

Iliya V. Soldatkin,
https://codepen.io/wega-cap/pen/VwrWmdP

[Iliya V. Soldatkin]

insighter, спасибо!

[Iliya V. Soldatkin]

insighter, а, почему использовать filter - это не очень?

[insighter]

Iliya V. Soldatkin, да не, норм вариант,
все равно для формирования нового массива по списку полностью проходить придется

[Iliya V. Soldatkin]

insighter, ок)