Блог

Как передать ключ в этом коде?

{result.map(book, key => Я застрял здесь. Я пытался несколько раз, но у меня не получается!

           { 
             result.map(book => (
                    <div className="col-md-3 mb-5">
                        <div className="card card-body bg-light text-center h-100">
                            <img className="w-100 mb-2" src={book.volumeInfo.imageLinks !== undefined ? book.volumeInfo.imageLinks.thumbnail : ''} alt={book.title} />
                            <h3 className="text-dark card-title">{book.volumeInfo.title}</h3>
                            <h5 className="text-dark card-title">{book.volumeInfo.authors}</h5>
                            </Link>
                        </div>
                    </div>
                   ))
          }
 

Реагировать.Дети.toArray решает эту проблему, поскольку он берет на себя задачу присвоения ключей дочерним элементам. Сделай это вот так

 {React.Children.toArray(
result.map(book => (
                    <div className="col-md-3 mb-5">
                        <div className="card card-body bg-light text-center h-100">
                            <img className="w-100 mb-2" src={book.volumeInfo.imageLinks !== undefined ? book.volumeInfo.imageLinks.thumbnail : ''} alt={book.title} />
                            <h3 className="text-dark card-title">{book.volumeInfo.title}</h3>
                            <h5 className="text-dark card-title">{book.volumeInfo.authors}</h5>
                            </Link>
                        </div>
                    </div>

                )))}
 

Лучший способ-использовать уникальный ключ для книг (идентификатор). Это может вызвать проблемы, если вы, например, удалите книги.

Я не знаю вашей реализации API, но это может выглядеть примерно так:

  {result.map(book => (
    <div className="col-md-3 mb-5" key={book.id}>
        <div className="card card-body bg-light text-center h-100">
            <img className="w-100 mb-2" src={book.volumeInfo.imageLinks !== undefined ? book.volumeInfo.imageLinks.thumbnail : ''} alt={book.title} />
            <h3 className="text-dark card-title">{book.volumeInfo.title}</h3>
            <h5 className="text-dark card-title">{book.volumeInfo.authors}</h5>
            </Link>
        </div>
    </div>
))}
 

Свойство ключа должно быть уникальным, чтобы не нарушать правила реакции. Поэтому я предлагаю вам использовать book.id если у него есть свойство is или индекс массива с. map((book,index)=>{}) Обратите внимание, что если у вас в коде несколько карт, фактически во всем приложении, этот подход, вероятно, не сработает, так как будет больше компонентов с одним и тем же ключевым свойством.

Поэтому я предлагаю вам использовать ключ с префиксом, который предотвращает дубликаты. Например

 books.map((book, idx)=><Book key={`book_${idx}`} />)
 

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

Похоже, вам не хватает круглых скобок.

Если вы хотите использовать индекс элемента в качестве ключа, вы можете попробовать:

 {result.map((book, index) => <div key={index} ...>...</div>)}
 

Но использовать индексы для ключей не рекомендуется. Было бы лучше использовать идентификаторы из ваших данных в качестве ключей.

Подробнее об этом: Индекс как ключ является анти-шаблоном.