需要幫助搞清楚如何從reddit的API與ReactJS

好了這個代碼訪問數據，所以我有這樣的代碼在這裏需要幫助搞清楚如何從reddit的API與ReactJS

componentDidMount() { 
    var _this = this; 
    var cbname = `fn${Date.now()}`; 
    var script = document.createElement("script"); 
    script.src = `https://www.reddit.com/reddits.json?jsonp=${cbname}`; 

    window[cbname] = function(jsonData) { 
     _this.setState({ 
     navigationItems: jsonData.data.children 
     }); 
     delete window[cbname]; 
     document.head.removeChild(script); 
    }; 

    document.head.appendChild(script); 
    }

我想不出在所有如何訪問reddit.json調用來檢索數據，對於剛剛瞭解ReactJS如何工作的人來說，這看起來非常混亂。而且這是狀態+組件構造，其櫃面需要：

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeNavigationUrl: "", 
     navigationItems: [], 
     storyItems: [], 
     title: "Please select a sub" 
    }; 
    }

對於代碼的其餘部分是指https://github.com/ssorallen/react-reddit-client，碼片位於SRC/app.js

綜觀上述代碼，我理解一切直到實例化腳本行.Src 之後，我不明白髮生了什麼，甚至窗口[cbname]部分。我試着用Google搜索它，但它太混亂了，特別是窗口[cbname]真正做了什麼，以及爲什麼代碼段在刪除文檔後將一個子文件（腳本）附加到文檔頭部。

來源

2017-08-13 adriam

這是使用JSONP API - 基本上需要API的JSON封裝成函數回調

如{ "foo": "bar" }與callback=foo會叫一個名爲foo全局函數並通過JSON作爲對象。

在這種情況下，它將window['fn' + Date.now()]註冊爲回調。一旦API調用它，它將設置狀態並刪除全局函數。

看到What is JSONP all about?

TLDR：JSONP需要窗口對象的全局函數。當被調用時，它會設置狀態並刪除它自己和腳本標記。 JSONP有助於規避CORS

來源

2017-08-13 20:18:31

謝謝！這完全解釋了它 – adriam

需要幫助搞清楚如何從reddit的API與ReactJS

回答

相關問題