Попытка отобразить JSON dict, полученное от elasti c -search, но получаю ошибку [object Promise]

Question

Я новичок в reactjs и javascript.

Я использую пакет elasticsearch npm для взаимодействия с API ElasticSearch (ES)

Я пытаюсь выполнить итерацию по JSON диктовкам, получаемым от ES API, но получаю постоянную ошибку следующего вида:

«Ошибка: объекты недействительны как дочерние объекты React ( found: [object Promise]). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив. в MoClassFetch (в src / index. js: 10) "

Благодарю за любую помощь на моем пути.

данные

      "hits" : {
        "total" : {
          "value" : 3,
          "relation" : "eq"
        },
        "max_score" : 9.174298,
        "hits" : [
          {
            "_index" : "obj-model",
            "_type" : "_doc",
            "_id" : "53183",
            "_score" : 9.174298,
            "_source" : {
              "MoClass" : {
                "Name" : "fvBD",
                "Description" : "A bridge domain is a unique ...",
                ...
            }
          ]

Обновлен код на основе комментариев Джейкоба ОБНОВЛЕНО компонент MoClassFetch

    import React, { Component } from "react";
    import { render } from "react-dom";
    import elasticsearch from "elasticsearch";
    import ReactTable from 'react-table';
    import { useEffect, useState } from 'react';



    let client = new elasticsearch.Client({
      host: "10.48.37.181:9200",
      //log: "trace"
    });

    function ParseMoClassDict(moClassDict) {
        const moClassObject = Object.keys(moClassDict).map(key =>
            <moClass key={key} value={key}>{moClassDict[key]}</moClass>
            )


        return (
            <div>{moClassObject}</div>
        )
    }

        //const results = [];

    function MoClassFetch() {
      const [results, setResults] = useState([]);

      useEffect(() => {
        client
          .search({
            index: 'aci-apic-obj-model_*',
            allow_partial_search_results: true,
            expand_wildcards: 'all',
            track_total_hits: true,
            q: 'MoClass.Name: fvBD',
            pretty: true
          })
          .then(({ body }) => setResults(body.hits.hits))      
      }, []);



        return (
            //console.log(results),
            <div className="search_results">
            <hr />
            <ul>
                return (
                    <li>
                        { results.map(result => {
                            return (
                                <li key={result._index}>
                                    {result._index}
                                    <ul>
                                        <li>
                                            <ParseMoClassDict moClassDict={result._source.MoClass} />
                                        </li>
                                    </ul>
                                </li>
                            );
                        })}
                    </li>
                );
            </ul>
          </div>
        )
    }



    export default MoClassFetch;

Answer 1

Вы определили MoClassFetch как async function. Функции asyn c всегда возвращают обещания, поэтому вы не можете использовать функцию asyn c в качестве компонента.

Однако у вас есть некоторый код asyn c, который вам нужно выполнить. Обычно для этого требуются две вещи: некоторое состояние, чтобы вы могли повторно выполнить рендеринг после завершения части asyn c, и эффект , который выполняет операцию asyn c. Хуки useState и useEffect - лучший способ сделать это с компонентами на основе функций.

Вот как это может выглядеть:

import { useEffect, useState } from 'react';

function MoClassFetch() {
  const [results, setResults] = useState([]);

  useEffect(() => {
    client
      .search({
        index: 'aci-apic-obj-model_*',
        allow_partial_search_results: true,
        expand_wildcards: 'all',
        track_total_hits: true,
        q: 'MoClass.Name: fvBD',
        pretty: true
      })
      .then(({ body }) => setResults(body.hits.hits))      
  }, []);

  return (
    <div className="search_results">
      <hr />
      <ul>
        { 
          results.map(result => (
            <li key={result._index}>
              {result._index}
              <ul>
                <li>
                  <ParseMoClassDict moClassDict={result._source.MoClass} />
                </li>
              </ul>
            </li>
          );
        }
      </ul>
    </div>
  )
}