在react和JavaScript中以正确的格式获取数据

我正在尝试用react javascript制作wordCloud，但在获取正确格式的数据时遇到了一些困难。数据应如下所示：

<KeywordCloud data={[
    {
      text: 'Pick',
      value: 20,
      font: 'impact',
      …
    },
    {
      text: 'Hello',
      value: 40,
      font: 'impact',
      …
    },
    {
      text: 'Package',
      value: 80,
      font: 'impact',
      …
    },
    …
  ]} /> 

---

我怎样才能使它的格式正确？当我尝试使用books.map（book=>）时，它会为每本书创建一个不同的wordCloud。

每次将数据推送到列表时，它都会重新渲染应用程序，尝试在渲染函数中分离返回和逻辑，类似这样

  let data = [];
    let books = [...this.props.searchResult]; // The search result (books)
    books.map(book => data.push({ 
        text: book.title, 
        value: book.value, 
        font: book.font
    }))
    return (
        <div>
          <KeywordCloud data={data} />>
        </div>
    );

let data=[]；
let books=[…this.props.searchResult]；//搜索结果（books）
books.map（book=>data.push（{
文本：book.title，
价值：账面价值，
字体：book.font
}))
返回(
>
);

你能和我们分享这本书的格式吗？你在

this.props.searchResult

中有什么？请分享你的试用代码和你需要的输出。这本书来自数据库，有book.author、book.title等值。我只希望每本书都有：{text:book.title值：Math.random（），font:'impact'}

  let data = [];
    let books = [...this.props.searchResult]; // The search result (books)
    books.map(book => data.push({ 
        text: book.title, 
        value: book.value, 
        font: book.font
    }))
    return (
        <div>
          <KeywordCloud data={data} />>
        </div>
    );