URLの配列からコンテンツを取得する方法ネイティブで反応する

Question

複数のフィードからデータを取得して配列に格納しようとしています。

のURL：私は移入したい

var URLS = [ 
    "https://www.wired.com/feed/rss", 
    "http://feeds.bbci.co.uk/news/rss.xml", 
    "http://www.nasa.gov/rss/dyn/breaking_news.rss" 
]; 

アレイ：

constructor() { 
    super() 
    this.state = { 
     data: [] 
    } 
    } 

機能

フィードからデータを取得するためのコードを

extractData(text) { 
    var doc = new DOMParser().parseFromString(text, 'text/xml'); 
    var items_array = []; 
    var items = doc.getElementsByTagName('item'); 

    for (var i = 0; i < items.length; i++) { 
     items_array.push({ 
     title: items[i].getElementsByTagName('title')[0].lastChild.data, 
     description: items[i].getElementsByTagName('description')[0].lastChild.data,     
     }) 
    } 
    return items_array; 
    } 

をタイトルと説明を抽出します：

fetchData() { 
    return Promise.all(
     URLS.map(url => fetch(url) 
     .then(response => response.text()) 
     .then(responseData => { 
      this.setState(
      (prevState, props) => ({ 
       data: [...prevState.data, this.extractData(responseData)] 
      }) 
     ); 
     }) 
     .catch(err => console.error(err)) 
    ) 
    ).then(() => { /* do some thing */ }, err => { console.error(err) }) 
    } 

問題は、データがリストに表示されないということですが、私はそれ以下のコードのようなテストデータを追加する場合、うまく表示されます。data: [...prevState.data, {title: "t1", description: "d1"}, {title: "t2", description: "d2"}]

Answer 1

ロジックがうまく動作するようです、しかし、あなたが使用していません正しくスプレッド演算子：

this.setState(
    (prevState, props) => ({ 
    data: [...prevState.data, ...this.extractData(responseData)] 
    }) 
) 

const data = [1,2,3,4] 
 
const extraElements = [5,6,7,8] 
 
const result = [...data, ...extraElements] 
 

 
console.log(result)