我是 React 新手，在我非常简单的应用程序中，我只是尝试读取和显示 json 数据(他们发布的公司和职位)。使用React 16.3.0和react-dom 16.3.2和axios 0.18.0
我的代码如下，最终输出应该以良好的格式显示我试图在每一行中获取的数据。
但它根本没有渲染并出现错误 - 我一定在这里犯了一些非常愚蠢的错误。
Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
at isURLSameOrigin (isURLSameOrigin.js:57)
at dispatchXhrRequest (xhr.js:109)
at new Promise (<anonymous>)
at xhrAdapter (xhr.js:12)
at dispatchRequest (dispatchRequest.js:59)
这是我的代码，这是我的 jsfiddle
<!-- DOCTYPE HTML -->
<html>
<head>
<title>Your First React Project</title>
<link rel="stylesheet" type="text/css" href="app.css">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.component {
constructor (props) {
super(props);
this.state = { jobs: [] };
}
componentDidMount () {
// var th = this;
this.serverRequest =
axios.get(this.props.source)
.then(function(result) {
this.setState({
jobs: result.data.jobs
});
})
}
componentWillUnmount () {
this.serverRequest.abort();
}
render () {
return (
<div>
<h1>Jobs!</h1>
{/* Don't have an ID to use for the key, URL work ok? */}
{this.state.jobs.map(function(job) {
return (
<div key={job.url} className="job">
<a href={job.url}>
{job.company_name}
is looking for a
{job.term}
{job.title}
</a>
</div>
);
})}
</div>
)
}
}
ReactDOM.render(<App source="https://gist.githubusercontent.com/rohan-paul/b74bf6ef1adfdb92e0af5783e6c93a71/raw/bdffbbcb50128c03dd9edc90dbeb85e88c70ebc4/jobs.json"/>, document.getElementById('#root'));
</script>
</body>
</html>
最佳答案
这是固定的jsfiddle:https://jsfiddle.net/n85v504b/2/
问题是您正在发出默认情况下不允许的跨源请求。我已将 axios 调用更改为:
axios.request({
method: "get",
url: this.props.source,
crossDomain: true
})
还更改了 promise 履行，因为这是未定义的(原因在此解释Why is "this" in an anonymous function undefined when using strict?)
then((result) => this.setState({jobs: result.data.jobs}))
关于javascript - Reactjs 应用程序 - 无法使用 axios 获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50370103/