#reactjs
#reactjs
Вопрос:
Я извлекаю данные книг из файла json
books= [{ id:'1', Name: 'abc', keywords: '['action', 'fiction']',....]
Мой код react для book js
import React from 'react';
const Book = (props) => {
const { book } = props;
return (
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<h5>{ book.name }</h5>
<div className="card-text">
<p>{ book.keywords}</p>
</div>
</div>
</div>
</div>
)
}
Как мне отобразить данные для ключевых слов, потому что теперь они отображаются только в виде массива?
вывод: название книги
ключевые слова: [‘действие’, ‘вымысел’]
требуемый вывод: Название книги ключевое слово: боевик, художественная литература
Комментарии:
1.
<p>{ book.keywords amp;amp; book.keywords.join(',') }</p>2. Проверьте developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
3. вы ищете подобное решение stackblitz.com/edit/react-ya7zkv ?
4. @jayavel да, но я получаю ошибку с book. keywords.map не является функцией
5. @vineetakande Я вижу в ваших ключевых словах данных что-то вроде строки: ключевые слова: ‘[‘действие’, ‘вымысел’]’ проверьте формат один раз
Ответ №1:
Это довольно просто, вы можете использовать array.map в вашем массиве books:
Вместо:
<div className="card-text">
<p>{ book.keywords}</p>
</div>
Вы можете использовать:
{this.props.books.map(book => // for each book, render...
<div className="card-text">
<p>{book.name}</p>
{book.keywords.map(keyword => // for each keyword in array, render...
<li>{keyword}</li>
)}
</div>
)}
результат будет выглядеть:
Здесь живой пример.