将数组绑定到状态时出错

Question

我正在尝试使用 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 是全新的，所以需要一点手把手的操作，因为这是我第一次写它。如果这段代码有点太乱，有人能帮我看看如何写一个简单的获取就太好了。

此外，如果您有时间，如果有人可以解释我如何在 table 中显示数组，那就太好了。在 showTable 部分。

Answer 1

一旦你得到response，你需要使用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>

将数组绑定到状态时出错

Error while binding array to state

javascript

json

fetch

reactjs