个人中心
gpt4 book ai didi

javascript - react 数据拉取不起作用

转载 作者：行者123 更新时间：2023-12-03 05:57:40 26 4
gpt4 key购买 nike

我是 react 新手，并尝试构建一个表格组件，该组件根据标题和行传入的内容进行更改。

我一直在关注fb react 教程，但我遇到了一个障碍，我在这里查看并做了一些更改，但没有任何效果。

这是我的 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 文件中有外部 react 脚本，就是这个。

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);

正如你所看到的，我已经注释掉了以前对表的 props 调用的部分。现在我正在尝试从另一个文件中获取信息，在这里我必须使用状态。

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

<?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 也是如此。那么我在这方面做错了什么？如果我静态地放入数据并以这种方式插入到该页面上，但调用不起作用，我知道如何使其工作。

最佳答案

由于异步 $.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);

关于javascript - react 数据拉取不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39854681/

26 4 0
文章推荐： azure - Set-AzureServiceDiagnosticsExtension 失败并显示 "Deployment not found in service"
文章推荐： java - 在 LineBreakMeasurer 中处理\n
文章推荐： android - Azure 应用服务和通知中心是否可以与 2 个或更多 Android 应用共享？
文章推荐： asp.net-mvc - 在 razor foreach 上获取索引值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com