帶有JSON調用的反應列表？（FIDDLE）

-1

我「米試圖拉圖像轉換成一個使用JSON陣營列表模塊並不能找出我在做什麼錯。帶有JSON調用的反應列表？（FIDDLE）

這FIDDLE應該從我的服務器抓取兩個圖像。

代碼：

var Playlist = React.createClass({ 
    render() { 
    var playlistImages = []; 
    $.getJSON('http://k1r.com/json/playlist_tn.json', function(data){ 
     playlistImages = data;  
    }); 
    return (
     <List list={playlistImages.images} /> 
    ) 
    } 
});

UPDATED FIDDLE

來源

2016-05-12 Kirk Ross

我不知道，你可以直接使用的jsfiddle模塊，但除此之外，主要的問題是，你是抓取了一些異步DAT直接在你的渲染方法中，React不會在渲染你的List之前等待完成。

建議的方法（通過文檔：https://facebook.github.io/react/tips/initial-ajax.html）是在componentDidMount或componentWillMount生命週期方法內部發出數據請求，然後在接收到數據時使用setState（）觸發重新呈現，然後應該正確呈現您的列表。

來源

2016-05-12 20:12:35

謝謝@BradColthurst ...我的React知識在這一點上非常薄弱，但我更新了我的FIDDLE（上圖），我認爲它應該是。我還在我的服務器根目錄中添加了一個訪問控制標題，所以它應該爲我的json文件提供服務，但由於沒有顯示2個圖像，所以我顯然做了一些錯誤。 –

更新的小提琴仍然存在不少問題，例如從https（jsfiddle）到http（您的JSON所在的位置）執行GET請求。它也看起來像你在狀態和道具上絆倒了一些，以及如何構建數據和跨組件通信。下面是一個工作的codepen，用setTimeout（）來僞裝AJAX請求並呈現數據，我在那裏添加了一些註釋以幫助您：http://codepen.io/anon/pen/jqRWbz –

相當感謝@BradColthurst 。這確實有很大的幫助。我一直在努力正確地處理：如何以及何時通過組件進行通信。我將能夠將您的示例應用到我的項目中的無數位置。再次感謝！ –

帶有JSON調用的反應列表？ （FIDDLE）

回答

相關問題

帶有JSON調用的反應列表？（FIDDLE）