Reactjs 如何在react中呈现道具中的数据

我正在从json文件获取图书数据

books= [{ id:'1', Name: 'abc', keywords: '['action', 'fiction']',....]

我对BookJS的react代码是

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>
  )
}

从“React”导入React；
常数书=（道具）=>{
const{book}=道具；
返回(
{book.name}
{book.keywords}

)
}

如何渲染关键字的数据，因为它现在仅显示为数组？ 输出：书名 关键词：[“动作”、“小说”]

所需输出：图书名称

---

关键词：动作、小说

非常简单，您可以在书籍数组中使用array.map：

而不是：

<div className="card-text">
    <p>{ book.keywords}</p>
</div>

{book.keywords}

您可以使用：

  {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>
  )}

{this.props.books.map（book=>//对于每本书，渲染。。。
{book.name}

{book.keywords.map（关键字=>//对于数组中的每个关键字，呈现。。。
{关键字}
)}
)}

结果如下：

---

现场示例。

{book.keywords&&book.keywords.join（'，'）}
检查您是否正在寻找这样的解决方案？@jayavel是的，但我在book.keywords.map上遇到了错误function@vineetakande我可以在你的数据关键字中看到类似字符串的东西：关键字：“['action'”、“Frient']”检查一下格式