gpt4 book ai didi

javascript - 如何使用 React 从本地主机上运行的 API 加载和显示数据

转载 作者:行者123 更新时间:2023-12-03 06:13:06 24 4
gpt4 key购买 nike

我在下面的代码中收到错误“app.js:16 Uncaught (in Promise) TypeError: Cannot read property '0' of undefined”。

我正在尝试使用 React 显示来自运行在我的本地主机上的 Drupal API 的数据。在 React 应用程序中,我使用简单的 HTTP 服务器 (python -m SimpleHTTPServer) 来防止 XMLHttpRequest 错误,并且我在 API 上启用了 CORS。我使用的是 Axios,而不是 jQuery。

我无法让index.html 显示除文本“Event!”之外的任何内容,我做错了什么?这是我的 app.js

class App extends React.Component {

constructor(props) {
super(props);
this.state = {
title: ''
}
}

componentDidMount() {
var th = this;
this.serverRequest =
axios.get(this.props.source)
.then(function(event) {
th.setState({
title: event.title[0].value
});
})
}

componentWillUnmount() {
this.serverRequest.abort();
}

render() {
return (
<div>
<h1>Event!</h1>
<h2>{this.state.title}</h2>
</div>
);
}
}

ReactDOM.render(
<App source="http://localhost:8888/drupal/api/events" />,
document.getElementById('container')
);

这是我的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App</title>
</head>
<body>

<div id="container"></div>

<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel" src="js/app.js"></script>

</body>
</html>

除了文本“Event!”之外,我无法得到任何其他内容。出现,我做错了什么?这是我的 API 的一部分的屏幕截图,其中显示了我尝试显示“EspooCine”的标题示例。

enter image description here

如果我在 ComponentDidMount() 上添加 console.log,例如:

componentDidMount() {
var th = this;
this.serverRequest = axios.get(this.props.source).then(function(result) {
console.log(result);
})
}

然后我在控制台上看到以下内容:

enter image description here

最佳答案

Axios promise 在成功时生成一个响应对象,该对象具有包含响应正文的 data 属性;看来您正在尝试访问响应对象的 [0] 属性,而不是其 data 的属性,后者将是您期望的数组。此外,访问该结构时似乎还存在其他错误。尝试这个或类似的东西:

axios.get(this.props.source).then(event => {    
th.setState({
title: event.data[0].title[0].value
});
});

关于javascript - 如何使用 React 从本地主机上运行的 API 加载和显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39233694/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com