Question

我试图使用reactjs显示来自数据库的内容，但代码继续显示加载....并且不会打印任何结果。但我提醒结果，例如警报（res）; 它打印数据。我认为问题在于代码行 <MainBox data={this.state.data} />

下面是代码

var MainBox = React.createClass({
  getInitialState: function() {
    return { data: null };
  },

  componentDidMount: function() {
    $.get('jeck2.php').done(function(data) {
      this.setState({data: data});
//var res=this.state.data;
//alert(res);
    }.bind(this));
  },

  render: function() {
    if (this.state.data) {


return (
      <div>
        <MainBox data={this.state.data} />
      </div>
    );



    }

    return <div>Loading...</div>;
  }
});

以下是jeck2.php

  <div align="center" style="width:500px;">

<?php



include('db.php');

$be = $db->prepare("SELECT * FROM jeck order by id desc limit 1");

        $be->execute(array());
$allcount = $be->rowCount();


while($row = $be->fetch()){

 $id= htmlentities($row["id"], ENT_QUOTES);
 $name= htmlentities($row["name"], ENT_QUOTES);



?>

<div style="width:500px; height:50px">
  <div>

  <div class="con">
  <span style="padding:5px;">
<?php echo $name; ?>

</span>
  </div>
  </div> 
  <?php } ?>




  </div>

Answer 1

替换

<MainBox data={this.state.data} />

使用

<div dangerouslySetInnerHTML={{ __html: this.state.data.toString() }} />

但请勿在用户提交的数据上使用此方法，除非您知道自己在做什么并且正确地逃避了所有内容

Answer 2

您的代码中存在许多问题。 1_您正在使用Mainbox内的Mainbox，这是一个循环死锁条件。 2_您正在传回视图以回应jeck2.php。更好地传递json数据并在反应组件中保持视图。要在react组件中显示视图，您需要dangerouslySetInnerHTML：

render: function() {
  return this.state.data ?
   <div dangerouslySetInnerHTML={{ __html: this.state.data }} />
  : <div>Loading...</div>;
}

使用reactjs显示数据

2 个答案: