Javascript 将数组绑定到状态时出错_Javascript_Json_Reactjs_Fetch

Javascript 将数组绑定到状态时出错

javascript json reactjs

Javascript 将数组绑定到状态时出错,javascript,json,reactjs,fetch,Javascript,Json,Reactjs,Fetch,我正在尝试使用fetch从后端获取json数据，然后将其放在一个数组中，并在屏幕上显示，现在显示在控制台日志上。我试图将我得到的信息存储在一个名为data的数组中，我在getInState中初始化了该数组，然后在fetch调用完成时将json数据放入其中。目前我收到的错误是console.log基本上是空的这是代码 <body> <div id="reactBinding"></div> <script type="text/babel">

我正在尝试使用fetch从后端获取json数据，然后将其放在一个数组中，并在屏幕上显示，现在显示在控制台日志上。我试图将我得到的信息存储在一个名为

data

的数组中，我在getInState中初始化了该数组，然后在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>


var Heading=React.createClass({
getInitialState:函数（）{
返回{
数据：[]，
金额：1000
};
},
handleChange:函数（事件）{
this.setState（{amount:event.target.value}）；
},
loadCommentsFromServer:函数（）{
var值={
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“contentType”：“application/x-www-form-urlencoded”，
},
正文：({
金额：this.state.amount
})
};
取（'http://localhost:3000/getIOT，价值）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
响应数据：this.state.data
})
.catch（函数（err）{
控制台日志（err）；
});
},
可显示：函数（）{
控制台日志（数据）；
},
render:function（）{
var金额=this.state.amount；
返回(
{this.props.name}
{amount}
展示台
提交
);
}
});
ReactDOM.render(
，document.getElementById（'reactBinding'）；

同样，我要做的是从fetch中获取信息，将其放入名为

data

array的变量中，然后当有人单击

showTable

，它应该

console.log

数组。全新的反应，所以需要一点手握，因为这是我第一次写它。如果这段代码有点凌乱，那么最好有人能帮助我编写一个简单的fetch

另外，如果您有时间，如果有人能解释一下如何在表中显示数组，那就太好了。在

显示表

部分

一旦获得

响应

，您需要使用

设置状态

将数据存储在

状态

变量中，如下所示：

fetch('http://localhost:3000/getIOT', value)
  .then((response) => response.json())
  .then((responseData) =>{
     //responseData : this.state.data 
     this.setState({data: responseData}); // use this line
  })

render : function(){
        var amount = this.state.amount;
        console.log('data', this.state.data);
        ....

将

console.log

置于

render

函数中，一旦您得到响应，它将打印数据，如下所示：

fetch('http://localhost:3000/getIOT', value)
  .then((response) => response.json())
  .then((responseData) =>{
     //responseData : this.state.data 
     this.setState({data: responseData}); // use this line
  })

render : function(){
        var amount = this.state.amount;
        console.log('data', this.state.data);
        ....

更新：

检查工作代码：

var Heading=React.createClass({
getInitialState:函数（）{
返回{
数据：[]，
金额：1000
};
},
handleChange:函数（事件）{
this.setState（{amount:event.target.value}）；
},
loadCommentsFromServer:函数（）{
var值={
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“contentType”：“application/x-www-form-urlencoded”，
},
正文：({
金额：this.state.amount
})
};
取（'http://localhost:3000/getIOT，价值）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
this.setState（{data:responseData}）；
})
.catch（函数（err）{
控制台日志（err）；
});
},
可显示：函数（）{
console.log（this.state.data）；
},
render:function（）{
var金额=this.state.amount；
console.log（'data'，this.state.data）；
返回(
{this.props.name}
{amount}
展示台
提交
);
}
});
ReactDOM.render(
，document.getElementById（'reactBinding'）
获得响应后，需要使用设置状态
将数据存储在状态
变量中，如下所示：
fetch('http://localhost:3000/getIOT', value)
  .then((response) => response.json())
  .then((responseData) =>{
     //responseData : this.state.data 
     this.setState({data: responseData}); // use this line
  })

render : function(){
        var amount = this.state.amount;
        console.log('data', this.state.data);
        ....

将console.log
置于render
函数中，一旦您得到响应，它将打印数据，如下所示：
fetch('http://localhost:3000/getIOT', value)
  .then((response) => response.json())
  .then((responseData) =>{
     //responseData : this.state.data 
     this.setState({data: responseData}); // use this line
  })

render : function(){
        var amount = this.state.amount;
        console.log('data', this.state.data);
        ....

更新：
检查工作代码：

var Heading=React.createClass({
getInitialState:函数（）{
返回{
数据：[]，
金额：1000
};
},
handleChange:函数（事件）{
this.setState（{amount:event.target.value}）；
},
loadCommentsFromServer:函数（）{
var值={
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“contentType”：“application/x-www-form-urlencoded”，
},
正文：({
金额：this.state.amount
})
};
取（'http://localhost:3000/getIOT，价值）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
this.setState（{data:responseData}）；
})
.catch（函数（err）{
控制台日志（err）；
});
},
可显示：函数（）{
console.log（this.state.data）；
},
render:function（）{
var金额=this.state.amount；
console.log（'data'，this.state.data）；
返回(
{this.props.name}
{amount}
展示台
提交
);
}
});
ReactDOM.render(
，document.getElementById（'reactBinding'）

then（（响应）