个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 fetch 从后端获取 json 数据，然后将其放入数组中，并将其显示在屏幕上，目前在控制台日志上。我试图将返回的信息存储在一个名为 data 的数组中，该数组是我在 getinistate 中初始化的，然后在 fetch 调用完成时将 json 数据放入其中。目前我收到的错误是 console.log 基本上是空的。
这是代码。
<body>
<div id="reactBinding"></div>
<script type="text/babel">
var Heading = React.createClass({
getInitialState: function() {
return {
data: [],
amount : 1000
};
},
handleChange: function(event){
this.setState({amount : event.target.value});
},
loadCommentsFromServer: function() {
var value = {
method : 'GET' ,
headers : {
'Accept': 'application/json',
'contentType' : 'application/x-www-form-urlencoded',
},
body : ({
amount : this.state.amount
})
};
fetch('http://localhost:3000/getIOT', value)
.then((response) => response.json())
.then((responseData) =>{
responseData : this.state.data
})
.catch(function(err){
console.log(err);
});
},
showTable : function(){
console.log(data);
},
render : function(){
var amount = this.state.amount;
return(
<div className="container">
<div className="row">
<div classname="col-xs-4 col-xs-offset-4">
<div className="text-center">
<h1>{this.props.name}</h1>
<h2> {amount} </h2>
<input type="text" value={amount} onChange={this.handleChange} />
<button onClick={this.showTable}>Show Table</button>
<button onClick={this.loadCommentsFromServer}> Submit </button>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<div>
<Heading
name="React JS"
>
</Heading>
</div>
, document.getElementById('reactBinding'));
</script>
</body>
再说一遍，我想要做的是从 fetch 中获取信息，将其放入名为 data 数组的变量中，然后当有人单击 showTable 时，它应该 console.log 数组输出。 react 是全新的，所以需要一些指导，因为这是我第一次写它。如果这段代码有点太困惑，那么有人可以帮助我展示如何编写一个简单的获取，那就太好了。
此外，如果您有时间，如果有人可以解释如何在表格中显示数组，那就太好了。在 showTable 部分。
最佳答案
收到响应后，您需要使用setState将数据存储在state变量中，如下所示:
fetch('http://localhost:3000/getIOT', value)
.then((response) => response.json())
.then((responseData) =>{
//responseData : this.state.data
this.setState({data: responseData}); // use this line
})
将console.log放入render函数中，一旦收到响应，它就会打印数据，如下所示:
render : function(){
var amount = this.state.amount;
console.log('data', this.state.data);
....
更新:
检查工作代码:
var Heading = React.createClass({
getInitialState: function() {
return {
data: [],
amount : 1000
};
},
handleChange: function(event){
this.setState({amount : event.target.value});
},
loadCommentsFromServer: function() {
var value = {
method : 'GET' ,
headers : {
'Accept': 'application/json',
'contentType' : 'application/x-www-form-urlencoded',
},
body : ({
amount : this.state.amount
})
};
fetch('http://localhost:3000/getIOT', value)
.then((response) => response.json())
.then((responseData) =>{
this.setState({data: responseData});
})
.catch(function(err){
console.log(err);
});
},
showTable : function(){
console.log(this.state.data);
},
render : function(){
var amount = this.state.amount;
console.log('data', this.state.data);
return(
<div className="container">
<div className="row">
<div classname="col-xs-4 col-xs-offset-4">
<div className="text-center">
<h1>{this.props.name}</h1>
<h2> {amount} </h2>
<input type="text" value={amount} onChange={this.handleChange} />
<button onClick={this.showTable}>Show Table</button>
<button onClick={this.loadCommentsFromServer}> Submit </button>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<div>
<Heading
name="React JS"
>
</Heading>
</div>
, document.getElementById('reactBinding'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='reactBinding'></div>关于javascript - 将数组绑定(bind)到状态时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42471484/
25
4
0
我正在使用 node.js 和 mocha 单元测试，并且希望能够通过 npm 运行测试命令。当我在测试文件夹中运行 Mocha 测试时，测试运行成功。但是，当我运行 npm test 时，测试给出了
我的文本区域中有这些标签 ..... 我正在尝试使用 replaceAll() String 方法替换它们 text.replaceAll("", ""); text.replaceAll("", "
早上好，我是 ZXing 的新手，当我运行我的应用程序时出现以下错误: 异常Ljava/lang/NoClassDefFoundError；初始化 ICOM/google/zxing/client/a
我正在制作一些哈希函数。 它的源代码是... #include #include #include int m_hash(char *input, size_t in_length, char
我正在尝试使用 Spritekit 在 Swift 中编写游戏。目的是带着他的角色迎面而来的矩形逃跑。现在我在 SKPhysicsContactDelegate (didBegin ()) 方法中犯了
我正在尝试创建一个用于导入 CSV 文件的按钮，但出现此错误: actionPerformed(java.awt.event.ActionEvent) in cannot implement
请看下面的代码 public List getNames() { List names = new ArrayList(); try { createConnection(); Sta
我正在尝试添加一个事件以在“dealsArchive”表中创建一个条目，然后从“deals”表中删除该条目。它需要在特定时间执行。 这是我正在尝试使用的: DELIMITER $$ CREATE EV
我试图将两个存储过程的表结果存储到 phpmyadmin 例程窗口中的单个表中，这给了我 mariadb 语法错误。单独调用存储过程给出了结果。 存储过程代码 BEGIN CREATE TABLE t
我想在 videoview 中加载视频之前有一个进度条。但是我收到以下错误。我还添加了所有必要的导入。 我在 ANDROID 中使用 AIDE 这是我的代码 public class MainActi
我已经使用了 AsyncTask，但我不明白为什么在我的设备 (OS 4.0) 上测试时仍然出现错误。我的 apk 构建于 2.3.3 中。我想我把代码弄错了，但我不知道我的错误在哪里。任何人都请帮助
我在测试 friend 网站的安全性时，通过在 URL 末尾添加 ' 发现了 SQL 注入(inject)漏洞该网站是用zend框架构建的我遇到的问题是 MySQL -- 中的注释语法不起作用，因此页
我正在尝试使用堆栈溢出答案之一的交互式信息窗口。 链接如下: interactive infowindow 但是我在代码中使用 getMap() 时遇到错误。虽然我尝试使用 getMapAsync 但
当我编译以下代码时出现错误: The method addMouseListener(Player) is undefined for the type Player 代码: import java.
我是 Android 开发的初学者。我正在开发一个接收 MySql 数据然后将其保存在 SQLite 中的应用程序。 我将 Json 用于同步状态，以便我可以将未同步数据的数量显示为要同步的待处理数据
(这里是Hello world级别的自动化测试人员) 我正在尝试下载一个文件并将其重命名以便于查找。我收到一个错误....这是代码 @Test public void allDownload(
我只是在写另一个程序。并使用: while (cin) words.push_back(s); words是string的vector，s是string。 我的 RAM 使用量在 4 或 5
我是 AngularJS 的新手，我遇到了一个问题。我有一个带有提交按钮的页面，当我单击提交模式时必须打开并且来自 URL 的数据必须存在于模式中。现在，模式打开但它是空的并且没有从 URL 获取数据
我正在尝试读取一个文件(它可以包含任意数量的随机数字，但不会超过 500 个)并将其放入一个数组中。 稍后我将需要使用数组来做很多事情。 但到目前为止，这一小段代码给了我 no match for o
有些人在使用 make 命令进行编译时遇到了问题，所以我想我应该在这里尝试一下，我已经在以下操作系统的 ubuntu 32 位和挤压 64 位上尝试过 我克隆了 git 项目 https://gith
我是一名优秀的程序员,十分优秀！