Question

我调用了一个节点js server postgres db，这给了我一定的结果。我需要在2个表中显示这个结果。每个表有2列。在ajax调用之后，第二个表显示两列，但第一个表只显示第一列。这是我的React Code

Jsx代码

＆＃13;

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

＆＃13;

JS代码

＆＃13;

helper

＆＃13;

任何帮助都将受到高度赞赏

Answer 1

您可以<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select name="serviceDescription" id="serviceDescription"> <option value='service1'>service1</option> <option value='service2'>service2</option> <option value='service3'>service3</option> <option value='service4'>service4</option> <option value='service5'>service5</option> <option value='service6'>service6</option> <option value='service7'>service7</option> <option value='service8'>service8</option> </select> <input name="descriptionEdit" id="descriptionEdit" size="50"> console.log和apis查看数据是否正确

在反应js中调用ajax之后，该列消失

1 个答案: