我使用 Node、MongoDB 和 JavaScript 构建了一个 API。它工作得很好。我可以获取、放置、发布和删除 JSON 数据。当我尝试从我在另一台服务器上构建的应用程序的前端执行这些操作时，我的问题出现了。我提到的两个服务器都是本地主机，但位于不同的端口，这就是为什么我无法提供到它们的链接。我使用 React 作为我的 JavaScript 前端框架。
这是我前端的index.html文件的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Application Learning</title>
</head>
<body>
<div id="list-wrapper"></div>
<script src="/app/bundle.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
<script>
$(document).ready(function(){
$('#button').on('click', function(){
document.write('Button Pressed');
$.ajax({
url: 'http://localhost:3000/api/organisations',
dataType: 'jsonp',
success: function(data){
console.log(data);
var text = '';
var len = data.length;
for(var i=0;i<len;i++){
dataSet = data[i];
text += '<p>' + dataSet['text'] + '</p>'
}
document.write(text);
console.log(text);
}
});
});
});
</script>
</html>
这是我的index.js 文件，其中包含
ListComponentvar React = require('react');
var ReactDOM = require('react-dom');
//creating a component
var ListComponent = React.createClass({
render: function(){
return(
<div>
<h1>Home Page</h1>
<p>This is the list component</p>
<button id="button">Add Student</button>
</div>
);
}
});
ReactDOM.render(<ListComponent/>, document.getElementById('list-wrapper'));
点击添加学生按钮后，文档如下：
按下按钮
未定义
未定义
然而，控制台确实表明我已正确收到 JSON 数据，因为它向我显示了已返回的两个对象。
这让我相信数据的格式或类型存在错误，这不允许我显示它，因为它说它是未定义的。
当我尝试将这些数据提供给用户时，我可能会错误地处理这些数据？ 任何有关如何正确向用户显示这些数据的建议都将非常有用。
当谈到使用 API 来 POST、DELETE 或 PUT 数据时，我也会迷失方向。
我不希望我的问题变得更加笼统，但是当 API 位于使用 JavaScript 的不同服务器上时，有关如何以干净有效的方式与 API 交互的任何建议都是有用的。
你在哪里执行这行代码：
text += '<p>' + dataSet['text'] + '</p>'
您正在尝试访问对象
textdataSet如果您将其更改为
text += '<p>' + dataSet['name'] + '</p>'
你会看到你会得到
name undefined