Получение сообщения об ошибке "li: 'key' not prop"

Я работаю с React (версия 15.4.2) и динамически заполняю <ul> результатами запросов из моей базы данных. Я подумал, что правильно установил свойство 'key' в <li>, но, очевидно, я этого не сделал - при отображении списка я получаю сообщение об ошибке:

Предупреждение: li: "ключ" не является опорой. Попытка доступа к нему приведет к возвращению "неопределенного". Если вам нужно получить доступ к одному и тому же значению в дочернем компоненте, вы должны передать его как другой объект.

Вот код для моего списка:

function UserList(props) {
    return(
        <ul className="UserList">
            {
                props.user_list.map((user) => (
                    <li className="UserListItem" key={user.id}>
                        <Link to={'/users/${user.id}'}>{user.first_name} {user.last_name}</Link>
                    </li>
                ))
            }
        </ul>
    );
}

Я посмотрел на документы, и мне кажется, что это должно быть правильно. Если бы кто-то мог разъяснить мою ошибку, это было бы очень ценно.

Ответы

Ответ 1

Я бы предложил, попробуйте посмотреть, что произойдет, если вы выполните props.user_list.map((user, index) и для key, дайте ему index вместо user.id

Если этот процесс заставит предупреждение уйти, вы можете быть уверены, что у вас есть дубликат id для user. В этом случае я хотел бы предложить обратить ваше внимание на бэкэнд, который создает список пользователей. Как создается id? Возможно, стоит взглянуть на uuid, чтобы убедиться, что вы однозначно идентифицируете своих пользователей.

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

Ответ 2

Возможно, user.id дублируется, PLS снова проверить

Ответ 3

Где-то еще в коде вы пытаетесь получить доступ к props.key

Ответ 4

Может быть, "id" в верхнем регистре, и вы передаете null для ключа