我正在尝试为我延迟加载的项目获取一些单独的图表（图形）数据。为此，首先我获取项目（每个延迟加载 10 个），然后组合这些项目的名称并将其（组合名称字符串）发送到另一个 API 方法，并获取这 10 个项目的图表数据。在我将 Chart 组件（它是一个 apexcharts 组件）放入页面之前，一切似乎都运行良好。当我尝试这样做时，它总是抱怨系列标签（属性）未定义，因此无法获得未定义的 [0] 索引。
好吧，为了完成这项工作，我首先尝试查看是否一切正常，并通过在代码中放置 console.log 条目进行相应的分配。在看到一切正常后，我放置了 Chart 组件代码，但无论我做什么，它总是说 series 属性未定义。基本上我所做的一切都在第一个的 finally 块中Promise.all()。
对于那些[看不到图片链接的人] ( https://pasteboard.co/IAf7wNbW.png )
constructor(props) {
super(props);
this.trendSeries = [];
}
loadMatters() {
let self = this;
Promise.all([ this.getPopularMatters(), this.getResourceStatistics(), this.getPopularSeries()]).then(function (results) {
let items = (self.state.matters === null ? [] : self.state.matters);
let pageIndex = self.state.pageIndex;
items = items.concat(results[0]);
pageIndex++;
self.setState({
matters: items, statisticsByResources: results[1],
});
}).finally(function () {
/// Prepare the names joined by comma to get individual chart data
let namesArray = [];
self.state.matters.map((item, index) => {
namesArray.push(item.name);
});
const names = namesArray.join();
let seriesArray = [];
let items = self.state.matters;
/// GET INDIVIDUAL CHART DATA
Promise.all([self.getIndividualChartsForMatters(names)]).then(function (res) {
res[0].map((item, index) => {
items[index]["series"] = item.series; //put the series data into series property of each item.
seriesArray.push(item.series);
});
}).finally(function () {
console.log("seriesArray :", seriesArray);
console.log("seriesArray INDEX:", seriesArray[0]);
console.log("results 2 series : ", self.state.chartSeries);
console.log("R2 type : ", typeof (self.state.chartSeries));
console.log("index r2 : ", self.state.chartSeries[0]);
self.trendSeries = seriesArray;
self.setState({ individualChartSeries: seriesArray });
console.log("series STATE : ", self.state.individualChartSeries);
console.log("series STATE INDEX : ", self.state.individualChartSeries[0]);
console.log("trendSeries : ", self.trendSeries);
console.log("trendSeries INDEX : ", self.trendSeries[0]);
});
});
}
render() {
var items = [];
this.state.matters &&
this.state.matters.map((item, index) => (
items.push(
<div key={index} className="bg-color-mid-blue border-rad-8px mb-2_0em">
<div >
<div className="font-2_9em font-regular text-center line-height-1_1em pr-0_5em color-dark-gray">{item.order}</div>
<div>
<span className="d-block font-1_3em mbt-0_25em font-medium white-space-nowrap">{item.name}</span>
</div>
<div>
{ /// INDIVIDUAL TREND CHART WILL BE HERE
}
</div>
</div>
</div>);
return(
<InfiniteScroll
loadMore={this.loadMatters}
hasMore={this.state.hasMore && !this.state.isLoading}
loader={<div className="w-100per text-center pt-2_0em pb-2_0em" key={0}>Loading...</div>}>
{items.length > 0 ?
items
:
<div className="row">
<div className="col-xl-12 mb-2_0em">
<div className="bg-color-mid-blue p-2_0em border-rad-8px mb-2_0em color-mid-gray">
No trends to show here...
</div></div></div>}
</InfiniteScroll>);
}
PPP
<Chart
options={this.state.chartOptions}
series={this.trendSeries[index]}
type="line"
height="150px"
/>
SSS
<Chart
options={this.state.chartOptions}
series={this.state.individualChartSeries[index]}
type="line"
height="150px"
/>
III
<Chart
options={this.state.chartOptions}
series={item.series}
type="line"
height="150px"
/>
now when I put any of the above Chart components in the //INDIVIDUAL CHART WILL BE HERE part, I get an error saying that either 'TypeError: Cannot read property '0' of undefined' or 'Cannot read the property 'length' of undefined'. Which ultimately denotes that series attribute of the Chart component is undefined. But as the console.log logs clearly show, the series data (in all formats -trendSeries attribute (field), state variable, or injected into items array- )is correctly obtained.
What am I missing or doing wrong?