我是一个新的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;
你已经定义了 MoClassFetch
作为 async function
. 异步函数总是返回Promises,所以你不能将异步函数作为一个组件使用。
然而,你有一些异步代码需要执行。这通常需要两样东西:一些状态,这样一旦异步部分完成,你就可以重新渲染,以及一个 效果 执行异步操作。的 useState
和 useEffect
钩子是使用基于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>
)
}