Получение данных в правильном формате в реаги и JavaScript

Question

Я пытаюсь создать wordCloud в реагирующем javascript, но у меня возникают некоторые трудности с получением данных в правильном формате. Данные должны выглядеть следующим образом:

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

.. но у меня есть весь текст, который я не хочу использовать в списке

let books = [...this.props.searchResult];
book.title 

как мне его включитьправильный формат? Когда я пытаюсь использовать books.map (book =>, он создает разные слова-облака для каждой книги ..

Answer 1

Каждый раз, когда вы помещаете данные в список, приложение выполняет повторную визуализацию, пытаясь отделить возвращаемую часть и логику в функции визуализации, что-то вроде этого

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