javascript - React js中ajax调用后该列消失

Question

我调用了 Node js 服务器 postgres db，这给了我一个确定的结果。我需要在两个表中显示这个结果。每个表有 2 列。ajax 调用后，第二个表显示两列，但第一个表仅显示第一列。这是我的 react 代码

Jsx 代码

var apiTable = React.createClass({

  getInitialState: function() {
    return {
      data: []
    };
  },

  componentDidMount: function() {
    $.ajax({
      url: 'report/api?id=' + this.props.id,
      dataType: 'json',
      method: 'GET' ,
      success: function(res) {
        this.setState({data: res.data});
      }.bind(this),
      error: function(xhr, status, err) {
        React.unmountComponentAtNode(document.getElementById('alert'));
        React.renderComponent(<span className="alert alert-danger">Error</span>, document.getElementById('alert')); 
        console.error('Search error', err.toString());
      },
      complete: function(data) {
        React.unmountComponentAtNode(document.getElementById('alert'));
      }
    });
  },

  render: function() {
    var apis = this.state.data.api || [];
    var ctsTests = this.state.data.cts || [];

    var apiRows = apis.map(function(apiName) {
      return (<tr><td className="col-md-2">{apiName.api}</td><td className="col-md-2">{apiName.pathWeight}</td></tr>);
    });
    var ctsRows = ctsTests.map(function(test) {
      return (<tr><td>{test.cts}</td><td>{test.pathWeight}</td></tr>);
    });

    return (
      <div>
        <div className="table-container">
          <table className="table table-bordered table-hover">
            <thead>
                <tr>
                    <th className="col-md-2">CTS test cases</th>
                    <th className="col-md-2">Path Weight</th>
                </tr>
                {
                  ctsTests.length === 0 ?
                    <tr><td className="info-row">No CTS test cases found</td><td>No Path Weight</td></tr>
                  : ctsRows
                }
            </thead>
          </table>
        </div>
        <br/><br/>
        <div className="table-container">
          <table className="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Public APIs affected</th><th>Path Weight</th>
                </tr>
                {
                  apis.length === 0 ?
                    <tr><td className="info-row">No affected APIs found</td><td>No Path Weight</td></tr>
                  : apiRows
                }
            </thead>
          </table> 
        </div>       
      </div>
    );
  }

});

JS代码

var apiTable = React.createClass({displayName: 'apiTable',

  getInitialState: function() {
    return {
      data: []
    };
  },

  componentDidMount: function() {
    $.ajax({
      url: 'report/api?id=' + this.props.id,
      dataType: 'json',
      method: 'GET' ,
      success: function(res) {
        this.setState({data: res.data});
      }.bind(this),
      error: function(xhr, status, err) {
        React.unmountComponentAtNode(document.getElementById('alert'));
        React.renderComponent(React.DOM.span({className: "alert alert-danger"}, "Error"), document.getElementById('alert')); 
        console.error('Search error', err.toString());
      },
      complete: function(data) {
        React.unmountComponentAtNode(document.getElementById('alert'));
      }
    });
  },

  render: function() {
    var apis = this.state.data.api || [];
    var ctsTests = this.state.data.cts || [];

    var apiRows = apis.map(function(apiName) {
      return (React.DOM.tr(null, React.DOM.td({className: "col-md-2"}, apiName.api), React.DOM.td({className: "col-md-2"}, apiName.pathWeight)));
    });
    var ctsRows = ctsTests.map(function(test) {
      return (React.DOM.tr(null, React.DOM.td(null, test.cts), React.DOM.td(null, test.pathWeight)));
    });

    return (
      React.DOM.div(null, 
        React.DOM.div({className: "table-container"}, 
          React.DOM.table({className: "table table-bordered table-hover"}, 
            React.DOM.thead(null, 
                React.DOM.tr(null, 
                    React.DOM.th({className: "col-md-2"}, "CTS test cases"), 
                    React.DOM.th({className: "col-md-2"}, "Path Weight")
                ), 
                
                  ctsTests.length === 0 ?
                    React.DOM.tr(null, React.DOM.td({className: "info-row"}, "No CTS test cases found"), React.DOM.td(null, "No Path Weight"))
                  : ctsRows
                
            )
          )
        ), 
        React.DOM.br(null), React.DOM.br(null), 
        React.DOM.div({className: "table-container"}, 
          React.DOM.table({className: "table table-bordered table-hover"}, 
            React.DOM.thead(null, 
                React.DOM.tr(null, 
                    React.DOM.th(null, "Public APIs affected"), React.DOM.th(null, "Path Weight")
                ), 
                
                  apis.length === 0 ?
                    React.DOM.tr(null, React.DOM.td({className: "info-row"}, "No affected APIs found"), React.DOM.td(null, "No Path Weight"))
                  : apiRows
                
            )
          )
        )
      )
    );
  }

});

任何帮助将不胜感激

Answer 1

你可以通过console.log apis和ctsTests看看数据是否正确