Question

我是新手做出反应并尝试构建一个基于头部和行传入内容而更改的表组件。

我一直在关注fb反应教程，我已经遇到了一个路障，我已经看过这里并做了一些修改，但没有任何工作。

这是我的HTML页面，用于获取生成的内容。

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
        <link rel="stylesheet" type="text/css" href="/vendor/twbs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="/vendor/etdsolutions/sweetalert/sweetalert.css?<?= assetCacheQueryStr() ?>" />
        <link rel="stylesheet" type="text/css" href="/lib/jquery-ui-1.11.4/jquery-ui.css">
        <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">

        <!-- Javascript -->
        <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
        <script src="/vendor/etdsolutions/sweetalert/sweetalert.min.js?<?= assetCacheQueryStr()?>"></script>
    <script src="/vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
        <script src="/lib/sorttable.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>

    <title>React</title>
  </head>
    <body>
        <div id="loadboardContainer"></div>

        <!-- Import the table react setup. -->
        <script type="text/babel" src="test.js"></script>
    </body>
</html>

现在我在test.js文件中有外部反应脚本，就是这个。

var Table = React.createClass({
  getInitialState: function() {
    return {
      results: [],
      columns: []
    }
  },
  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function(result) {
      result = JSON.parse(result);
      this.setState({
        results: result['resultRows'],
        columns: $.makeArray(result['resultCols'])
      });
    }.bind(this));
  },
  componentWillUnmount: function(){
    this.serverRequest.abort();
  },
  render: function() {
    // Set array for rows.
    var rows = [];
    var header = [];

    this.state.columns.map(function(cols) {
      header.push(<TableColumns data={cols.cols} key={cols.id} />);
    });

    this.state.results.map(function(result) {
      rows.push(<TableRow data={result.rows} key={result.id} />);
    });

    // Loop through head to get columns.
    /*this.props.columns.forEach(function(cols) {
      header.push(<TableColumns data={cols.cols} key={cols.id} />);
    });

    // Loop through the returned rows and display.
    this.props.results.forEach(function(result) {
      rows.push(<TableRow data={result.rows} key={result.id} />);
    });*/


    // Return the table.
    return (
      <table className="table table-condensed">
        <thead>
          {header}
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    );
  }
});

// Set up columns
var TableColumns = React.createClass({
  render: function() {
    var colNodes = this.props.data.map(function(col, i){
      return (
        <th key={i}>{col}</th>
      );
    });
    return (
      <tr>
        {colNodes}
      </tr>
    );
  }
});

// Set up row
var TableRow = React.createClass({
  render: function() {
    var rowNodes = this.props.data.map(function(row, i){
      return (
        <td key={i}>{row}</td>
      );
    });
    return (
      <tr>
        {rowNodes}
      </tr>
    );
  }
});

var futureContainer = document.getElementById('loadboardContainer');

ReactDOM.render(<Table source="getTableValues.php" />, futureContainer);

正如你所看到的，我已经注释掉了曾经是表格的道具调用的一部分。既然我正试图从另一个文件中获取信息，那么我必须使用状态。

在另一个文件中，这就是我所拥有的。它只是一个数组数组，用于在我实际查询内容之前返回数据。

<?php
  // Start the session.
  session_start();

  // Set Variables.
  $returned = array(); // Returns results

  $returned['resultRows'][0] = array();
  $returned['resultRows'][0]['id'] = 10221;
  $returned['resultRows'][0]['rows'] = array("654221", "2016-03-26", "Customer 1", "98755/54622", "Carrier 1", "Driver 1", "2016-03-28", "TX - IN", "DRY", "1240", "", "", "This is a test note");

  $returned['resultRows'][1] = array();
  $returned['resultRows'][1]['id'] = 10223;
  $returned['resultRows'][1]['rows'] = array("654221", "2016-03-26", "Customer 1", "98755/54622", "Carrier 2", "Driver 2", "2016-03-28", "TX - IN", "DRY", "1240", "", "", "This is a test note2");

  $returned['resultCols']['id'] = 100;
  $returned['resultCols']['cols'] = array("PO Number", "Load Date", "Customer(s)", "Customer PO", "Carrier", "Driver", "Delivery Date", "Lane", "Temp", "Weight", "Attention Date", "ND Date", "Notes");

  echo json_encode($returned);
?>

我一直收到错误this.state.columns.map不是函数。如果我使用this.props也是如此。那么我在这方面做错了什么？我知道如果我静态输入数据并将其插入到自己的页面但是调用不起作用，该如何使其工作。

Answer 1

由于异步$ .get

，您尝试在开头映射字符串

替换这个：

getInitialState: function() {
  return {
     results: '',
     columns: ''
  }
}

由此：

getInitialState: function() {
  return {
     results: [],
     columns: []
  }
}

编辑与PHP返回

var Table = React.createClass({
  getInitialState: function() {
    return {
      results: [],
      columns: []
    }
  },
  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function(result) {
      result = JSON.parse(result);
      this.setState({
        results: result['resultRows'],
        columns: result['resultCols'].cols
      });
    }.bind(this));
  },
  componentWillUnmount: function(){
    this.serverRequest.abort();
  },
  render: function() {    

    // Return the table.
    return (
      <table className="table table-condensed">
        <thead>
          <TableColumns data={this.state.columns} />
        </thead>
        <tbody>
          {this.state.results.map(function(result) {
            rows.push(<TableRow data={result.rows} key={result.id} />);
          })}
        </tbody>
      </table>
    );
  }
});

// Set up columns
var TableColumns = React.createClass({
  render: function() {
    var colNodes = this.props.data.map(function(col, i){
      return (
        <th key={i}>{col}</th>
      );
    });
    return (
      <tr>
        {colNodes}
      </tr>
    );
  }
});

// Set up row
var TableRow = React.createClass({
  render: function() {
    var rowNodes = this.props.data.map(function(row, i){
      return (
        <td key={i}>{row}</td>
      );
    });
    return (
      <tr>
        {rowNodes}
      </tr>
    );
  }
});

var futureContainer = document.getElementById('loadboardContainer');

ReactDOM.render(<Table source="getTableValues.php" />, futureContainer);

反应数据拉不起

1 个答案: