array [index] возвращает неопределенное значение, а сам массив показывает каждый индекс

Question

Я пытаюсь получить отдельные данные диаграммы (графика) для своих лениво загруженных элементов. Для этого сначала я получаю элементы (по 10 для каждой отложенной загрузки), а затем объединяю имена этих элементов и отправляю их (объединенную строку имен) в другой метод API и получаю данные диаграммы для этих 10 элементов. Кажется, все работает нормально, пока я не помещу свой компонент Chart (который является компонентом apexcharts) на страницу. Когда я пытаюсь это сделать, он всегда жалуется на то, что тег (атрибут) серии не определен, и поэтому он не может получить индекс [0] неопределенного.

Хорошо, чтобы сделать это, я сначала попытался проверить, все ли правильно, и назначены ли они соответствующим образом, поместив записи console.log в коде. И после того, как я вижу, что все в порядке, я поместил код компонента Chart, но независимо от того, что я делаю, он всегда говорит, что атрибут серии не определен. В основном все, что я пытаюсь сделать, находится в блоке 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?