试图渲染从elastic-search收到的JSON dict,但得到[object Promise]错误。

问题描述 投票:0回答:1

我是一个新的reactjs和javascript的新手。

我正在使用 elasticsearch与ElasticSearch(ES)API交互的npm包。

我试图对我从ES API获得的JSON dicts进行迭代,但得到了一个一致的错误,如下所示。

"错误,对象作为React子对象无效(发现:[对象Promise])。对象作为React子对象无效(发现:[对象 Promise])。如果你的意思是渲染一个子集,请使用一个数组来代替。在MoClassFetch中(在srcindex.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 ...",
                ...
            }
          ]

根据Jacob的意见更新了代码更新的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;
javascript reactjs elasticsearch
1个回答
1
投票

你已经定义了 MoClassFetch 作为 async function. 异步函数总是返回Promises,所以你不能将异步函数作为一个组件使用。

然而,你有一些异步代码需要执行。这通常需要两样东西:一些状态,这样一旦异步部分完成,你就可以重新渲染,以及一个 效果 执行异步操作。的 useStateuseEffect 钩子是使用基于Function的组件的最佳方式。

下面是这样的。

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>
  )
}
© www.soinside.com 2019 - 2024. All rights reserved.