需要帮助搞清楚如何从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

回答

相关问题